mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-21 14:13:36 +08:00
refactor: permission (#357)
* refactor: permission * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * fix: 修复`mix`混合模式导航在生产环境左侧菜单一定机率不显示的问题 * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update
This commit is contained in:
RealityBoy
GitHub
@@ -1,36 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { StorageConfigs } from "/#/index";
|
||||
import { storageSession } from "@pureadmin/utils";
|
||||
import { type CSSProperties, computed } from "vue";
|
||||
import { hasAuth, getAuths } from "/@/router/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionButton"
|
||||
});
|
||||
|
||||
const auth = ref(
|
||||
storageSession.getItem<StorageConfigs>("info").username || "admin"
|
||||
);
|
||||
|
||||
function changRole(value) {
|
||||
storageSession.setItem("info", {
|
||||
username: value,
|
||||
accessToken: `eyJhbGciOiJIUzUxMiJ9.${value}`
|
||||
});
|
||||
window.location.reload();
|
||||
}
|
||||
let width = computed((): CSSProperties => {
|
||||
return {
|
||||
width: "85vw"
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-radio-group v-model="auth" @change="changRole">
|
||||
<el-radio-button label="admin" />
|
||||
<el-radio-button label="test" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
<p v-auth="'v-admin'">只有admin可看</p>
|
||||
<p v-auth="'v-test'">只有test可看</p>
|
||||
</el-card>
|
||||
<el-space direction="vertical" size="large">
|
||||
<el-tag :style="width" size="large" effect="dark">
|
||||
当前拥有的code列表：{{ getAuths() }}
|
||||
</el-tag>
|
||||
|
||||
<el-card shadow="never" :style="width">
|
||||
<template #header>
|
||||
<div class="card-header">组件方式判断权限</div>
|
||||
</template>
|
||||
<Auth value="btn_add">
|
||||
<el-button type="success"> 拥有code：'btn_add' 权限可见 </el-button>
|
||||
</Auth>
|
||||
<Auth :value="['btn_edit']">
|
||||
<el-button type="primary"> 拥有code：['btn_edit'] 权限可见 </el-button>
|
||||
</Auth>
|
||||
<Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
|
||||
<el-button type="danger">
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</Auth>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" :style="width">
|
||||
<template #header>
|
||||
<div class="card-header">函数方式判断权限</div>
|
||||
</template>
|
||||
<el-button type="success" v-if="hasAuth('btn_add')">
|
||||
拥有code：'btn_add' 权限可见
|
||||
</el-button>
|
||||
<el-button type="primary" v-if="hasAuth(['btn_edit'])">
|
||||
拥有code：['btn_edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
|
||||
>
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" :style="width">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
指令方式判断权限（该方式不能动态修改权限）
|
||||
</div>
|
||||
</template>
|
||||
<el-button type="success" v-auth="'btn_add'">
|
||||
拥有code：'btn_add' 权限可见
|
||||
</el-button>
|
||||
<el-button type="primary" v-auth="['btn_edit']">
|
||||
拥有code：['btn_edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button type="danger" v-auth="['btn_add', 'btn_edit', 'btn_delete']">
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</el-card>
|
||||
</el-space>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-tag) {
|
||||
justify-content: start;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,53 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, unref } from "vue";
|
||||
import type { StorageConfigs } from "/#/index";
|
||||
import { storageSession } from "@pureadmin/utils";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
import { initRouter } from "/@/router/utils";
|
||||
import { type CSSProperties, ref, computed } from "vue";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
import { usePermissionStoreHook } from "/@/store/modules/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionPage"
|
||||
});
|
||||
|
||||
let purview = ref<string>(
|
||||
storageSession.getItem<StorageConfigs>("info").username
|
||||
);
|
||||
let width = computed((): CSSProperties => {
|
||||
return {
|
||||
width: "85vw"
|
||||
};
|
||||
});
|
||||
|
||||
function changRole() {
|
||||
if (unref(purview) === "admin") {
|
||||
storageSession.setItem("info", {
|
||||
username: "test",
|
||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
|
||||
});
|
||||
window.location.reload();
|
||||
} else {
|
||||
storageSession.setItem("info", {
|
||||
username: "admin",
|
||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
|
||||
});
|
||||
window.location.reload();
|
||||
let username = ref(useUserStoreHook()?.username);
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: "admin",
|
||||
label: "管理员角色"
|
||||
},
|
||||
{
|
||||
value: "common",
|
||||
label: "普通角色"
|
||||
}
|
||||
];
|
||||
|
||||
function onChange() {
|
||||
useUserStoreHook()
|
||||
.loginByUsername({ username: username.value })
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
usePermissionStoreHook().clearAllCachePage();
|
||||
initRouter();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
当前角色：
|
||||
<span style="font-size: 26px">{{ purview }}</span>
|
||||
<p style="color: #ffa500">
|
||||
查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="changRole"
|
||||
:icon="useRenderIcon('user', { color: '#fff' })"
|
||||
>
|
||||
切换角色
|
||||
</el-button>
|
||||
</el-card>
|
||||
<el-space direction="vertical" size="large">
|
||||
<el-tag :style="width" size="large" effect="dark">
|
||||
模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
|
||||
</el-tag>
|
||||
<el-card shadow="never" :style="width">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>当前角色：{{ username }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-select v-model="username" @change="onChange">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-card>
|
||||
</el-space>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-tag) {
|
||||
justify-content: start;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user