浅谈 VUE 前端权限

前端权限：因为前端本来就是不安全的，真正的安全还是需要后端兄弟去把关，所以后端也必须按做权限控制！我们前端的权限校验主要的目的是过滤不该有的请求和操作，减少服务端压力。

一般来说前端权限在四个方面：接口权限、按钮权限，页面权限，路由权限

一、接口权限

接口权限：一般是在登录页点击登录时获取到Token,将token存起来（cookie或者游览器存储（localStorage或者ssessionStorage）），每次登录的时候头部携带token就行了（axios请求拦截器实现）。

第一种方式：vuex存储Token和用户信息

第二种方式：cookie存储Token和用户信息

二、按钮权限

页面中有新增，删除，编辑等操作按钮。不同用户（不同角色）应该是拥有不同操作权限的。
例如权限码为 0：不可见 1:可操作 2:不可操作
一般前端会和后端约定好按钮的名字，后端会返回一个按钮权限列表。然后我们根据权限列表使用v-if指令 或者 自定义权限指令、达到相应权限效果。

自定义权限指令，实质就是根据相应权限操作dom

按钮权限：一般登录的时候或者获取用户角色时候，后端会返回的一个数组，前端把数组存到vuex，再通过自定义指令或者 v-if 进行按钮级权限的操作

自定义指令 来控制按钮权限

Vue.directive(“mynewcode”,{bind:function(el,binding){…自定义指令中传递的三个参数
el:指令所绑定的元素，可以用来直接操作DOM。
binding:一个对象，包含指令的很多信息。
vnode:Vue编译生成的虚拟节点。

自定义指令有五个生命周期（也叫钩子函数），分别是

bind , inserted , update , componentUpdated , unbind

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。

对于对按钮权限的操作看你在那个生命周期操作（ bind 和 inserted都行）

第一步：再utils文件夹下面创建 buttonPerm.js文件
import Vue from "vue";
import store from "../store/index.js";
// 自定义指令
Vue.directive("btnPerm",{
     
    // 父级未渲染
    bind:function(el, bingind, vnode){
     
        // el 绑定的对象 DOM，原生JS处理
        // 操作DOM
        if(bingind.def.hasBtnPerm(bingind.value)) {
     
            我这边是通过给元素添加 class 名来按钮权限的操作 
            el.className = el.className + " dsb";
        }
    },
    hasBtnPerm:function(permission){
     
        const button = store.getters["appStore/buttons"]; // 请求到的数据权限
        const roles = store.getters["appStore/roles"]; // 获取角色 
        // 如果是超级管理员全部都可以操作
        if(roles.includes("admin")) {
      return true }
        return button.indexOf(permission) != -1; //
    }
})

第二步：在main.js文件中引入
// 自定义指令按钮权限
import "./utils/buttonPerm";

第三步:  在元素上使用自定义指令 v-btnPerm 来进行判断客户是否拥有该按钮权限
<template>
  <el-row>
    <el-col>
      <el-button type="danger" @click="search('search')" v-btnPerm="'info.edit'" class="dsn" >搜索</el-button>
    </el-col>
  </el-row>
</template>