权限管理
菜单权限
如果菜单是后端返回,在路由配置对 id 进行配置即可。
{
path: 'user',
name: 'user',
component: () => import('@/views/system/user/index.vue'),
meta: {
id: '1003', // 此处配置菜单权限Id
locale: 'menu.system.user',
requiresAuth: true,
icon: 'user',
level: 2,
},
},
按钮权限
按钮权限根据自定义指令 v-permission 进行配置。
<a-button type="primary" status="success" v-permission="1201">
<icon-edit size="18" />
</a-button>
指令permission
import { DirectiveBinding } from "vue";
import { useUserStore } from "@/store";
import settings from "@/config/settings.json";
function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
const { value } = binding;
const userStore = useUserStore();
const { roles } = userStore;
if (typeof value === "string" || typeof value === "number") {
// 这里根据项目进行调整
const hasPermission = settings.menuFromServer
? roles[0].operationIds.includes(value)
: true;
if (!hasPermission && el.parentNode) {
el.parentNode.removeChild(el);
}
} else {
throw new Error(`need roles! Like v-permission="['10000','10001']"`);
}
}
export default {
mounted(el: HTMLElement, binding: DirectiveBinding) {
checkPermission(el, binding);
},
updated(el: HTMLElement, binding: DirectiveBinding) {
checkPermission(el, binding);
},
};