语言基于：vue3.0+ts

1.首先我们在src/directive/permission/index.ts里定义一个指令

import useStore from '@/store';//pinia用来存放管理公用数据
import { Directive, DirectiveBinding } from 'vue';
/**
 * 按钮权限校验
 */
export const hasPermi: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const { user } = useStore();
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = user.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      //permissions:Array:["system:user:resetPwd","system:user:resetPwd"] --> 用户登录存在Store中的数据
      //all_permission:"*:*:*" --> 自己定义的字符串
      //permissionFlag:['system:menu:add'] --> binding.value

      //如果登录拿的用户信息存在Store中的权限数组存在"*:*:*"，代表有所有权限，不移除当前指令节点，
      //或者登录拿回来的存在Store中的权限数组中包含有当前指令传过来的权限，则代表有权限，不移除当前指令节点
      //登录拿回来的权限不存在"*:*:*"，且不包含指令节点传过来的权限，则移除当前指令节点
      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })
      //如果格式校验不上，则移除这个指令节点
      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\"")
    }
  }
};

2.把指令在src/directive/index.ts中定义一个统一挂载方法directive，将所有指令挂载在vue实例上。

import { hasPermi, hasRole } from './permission';
export default function directive(app){
  app.directive('hasRole', hasRole)
  app.directive('hasPermi', hasPermi)
}

3.在main.ts中引入这个方法，并执行它

import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 自定义指令
import directive from '@/directive';
directive(app);

4.给菜单页的新增按钮加上权限校验

<el-button type="primary" @click="handleAdd" v-hasPermi="['system:menu:add']" plain icon="Plus" >新增</el-button>

5.新建一个按钮权限，或者目录权限，或者菜单权限，这里先以一个按钮为例。

下图已经新建完成

6.给一个用户分配一个带有此菜单权限的角色

把角色的菜单权限的菜单新增与修改给它去调，保存一下。

7.如下图所示就实现了

换上jack账号查看，对应效果

对比之前的效果

查看另一种后台管理系统方案的实现：juejin.cn/post/710602…