中后台管理项目-button按钮的权限控制

 1、下面是json格式的关于教师登录要展示的路由配置

[
    {
        "path": "/project",
        "name": "project",
        "title": "项目管理",
        "component": "/Layout/index.vue",
        "redirect": "/project/add",
        "children": [
            {
                "path": "/project/add",
                "title": "项目管理",
                "component": "/Project-M/add.vue"
            },
            {
                "path": "/project/info",
                "title": "项目审核",
                //动态添加权限
                "rights": [
                    "view"
                    
                ],
                "component": "/Project-M/Info.vue"
            },
            {
                "path": "/project/operation",
                "title": "项目操作日志列表",
                "component": "/Project-M/Operation.vue"
            }
        ]
    },
    {
        "path": "/Social-security",
        "name": "Social-security",
        "title": "社保管理",
        "component": "/Layout/index.vue",
        "redirect": "/Social-security/Query",
        "children": [
            {
                "path": "/Social-security/Query",
                "title": "社保查询",
                "component": "/Social-security/Query.vue"
            },
            {
                "path": "/Social-security/upload",
                "title": "社保上传",
                "component": "/Social-security/Upload.vue"
            }
        ]
    }
]

2. 自定义权限校验的指令

/src/directives/permission.js

import router from '@/router'
export default {
    mounted(el,binding){
      //bindling.value为指令的绑定值
      const action = binding.value.action 
      const currentRight = router.currentRoute.value.meta.rights
      if(currentRight){
        //假设某用户对某模块只有添加和删除的权限
        //这个权限信息应该是不同用户登录时从后台拿到的对应的信息
        if (currentRight.indexOf(action) === -1){
            //不具备权限
            const type = binding.value.effect
            if (type === 'disabled'){
                //禁用
                el.disabled = true
                el.classList.add("is-disabled")
            }else{
                //移除
                el.parentNode.removeChild(el)
            }
        }
      }
    }
  }

 /src/directives/index.js

import permission from "./permission"
//批量注册指令(现在就一个permission)
const directives = {
  permission
}
//注册的一般写法，循环遍历directives，通过vue.directive注册
export default {
  install(Vue){
    Object.keys(directives).forEach(key=>{
      console.log("zcccc")
      Vue.directive(key,directives[key])
    })
  }
}

全局注册

import Directives from "./directives/index"
app.use(Directives)

班级管理中的添加按钮

学生管理中的删除按钮

  <button v-permission="{action:'add', effect:'disabled'}">添加班级</button>
   <button v-permission="{action:'delete'}">删除</button>