浅谈 VUE 前端权限

前端权限：因为前端本来就是不安全的，真正的安全还是需要后端兄弟去把关，所以后端也必须按做权限控制！我们前端的权限校验主要的目的是过滤不该有的请求和操作，减少服务端压力。
一般来说前端权限在四个方面：接口权限、按钮权限，页面权限，路由权限

一、接口权限

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

图片.png
第一种方式：vuex存储Token和用户信息
图片.png
第二种方式：cookie存储Token和用户信息
图片.png

二、按钮权限

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

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

图片.png

v-if 来控制按钮权限

第一步：再utils文件夹下面创建 rolesButtom.js文件
import store from "../store/index";
export function buttonPermission(permission){
    const button = store.getters["appStore/buttons"];//获取 vuex 里面的按钮权限数组
    return button.indexOf(permission) != -1; //-1是客户没有按钮权限
}
第二步：在 main.js 文件中引入，挂载到 vue 原型上
// 全局方法引入按钮权限(通过v-if)
import { buttonPermission } from "./utils/rolesButtom";
Vue.prototype.btnPerm = buttonPermission;
第三步：在元素上使用 v-if 来进行判断客户是否拥有该按钮权限
<template>
   </el-row>
    <el-col :span="2" style="float:left">
      <el-button type="primary" class="ml-10" @click="addInfoStatus = true" v-if="btnPerm('info.edit')">新增</el-button>
    </el-col>
  </el-row>
<template>

图片.png

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

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>

图片.png