前端权限：因为前端本来就是不安全的，真正的安全还是需要后端兄弟去把关，所以后端也必须按做权限控制！我们前端的权限校验主要的目的是过滤不该有的请求和操作，减少服务端压力。
一般来说前端权限在三个方面：接口权限、按钮权限，路由权限
二、按钮权限
页面中有新增，删除，编辑等操作按钮。不同用户（不同角色）应该是拥有不同操作权限的。
例如权限码为 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
网友评论