vue 全局权限控制

说在前面

权限控制一直是一个很烦人的事情，无论是前端还是后台。
在平常的项目里，可能大家都是通过后台传来的字段来控制元素的display属性。
其实这么做是很不严谨的。
因为可以通过F12查看元素，也可以进行更改，这个时候如果把display改为block，就可以操作它了，那你的权限控制就白做了。

vue项目如何做权限控制

我看到比较多的是这样的做法，根据后台传的字段，通过v-if，v-else来控制，这样是不会有dom产生了，不用担心别人恶意篡改。但是你在view层里写一些这样的是不是很不优雅？而且相当麻烦。

优雅的做法（大厂做法）Vue.directive

都9012年了，我们知道vue有个自定义指令，那我们可以用它来做控制。

1.新建一个文件array.js。用于存放后台传过来的所有权限

//检查该用户是否有此权限
export function checkArray(key){
    //模拟权限数组(实际项目是后台传过来的)
    let arr = ['1','2','3','4'];
    let index = arr.indexOf(key);
    if(index > -1){
        return true;
    }else{
        return false;
    }
}

2.我们这里做的是全局权限控制所以找到main.js

//引入写好的检查权限的方法
import {checkArray} from "./common/array"
//添加全局自定义指令
Vue.directive('display-key', {
  inserted (el, binding) {
    //获取到v-display-key的值
    let displayKey = binding.value
    if (displayKey) {
      //判断用户是否存在该权限
      let hasPermission = checkArray(displayKey)
      // console.log(hasPermission);
      //如果用户没有该权限，则删除对应的dom节点
      if (!hasPermission) {
        // console.log(el.parentNode);
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      //v-display-key值为空，抛出异常
      throw new Error(`need key! Like v-display-key="'displayKey'"`)
    }
  }
})

3.组件使用 v-display-key

由于我们是全局定义的，所以组件里无需单独引入。
直接在组件某个标签里加这个指令传入相对应的值，就会自动进行判断
如果用户没有此权限，则不会渲染这个dom，很安全，很便捷。一次写入，随处可用

//我们定义的 arr = ['1','2','3','4']; 所以下面两个按钮，a权限是不会渲染的，b权限是用户拥有的权限，可以正常使用。
  <el-button type="primary" v-display-key="'10'">a权限</el-button>
  <el-button type="primary" v-display-key="'4'">b权限</el-button>

总结

1.此种方法可以精确到组件里的任何一个标签，按钮级，输入框级都不在话下。
2.没有权限，就不会渲染dom，安全级别高

改进方案

写在main.js里面还是不够优雅，我们可以把它独立出来，main.js里面引入

这里顺便推荐一个高质量的java公众号，赶紧关注领取免费资料吧！

在这里插入图片描述