1，页面级权限
通过后台接口控制页面级的权限，将数据保存在本地并且和路由匹配，左侧tabber 仅展示导航到拥有权限的页面。或者使用路由拦截的方式也可以。
2，按钮级权限
超级管理员有所有按钮的权限，普通管理员可能缺少某些按钮的权限，比如编辑和删除等；
此时应该先从接口获取该用户拥有的按钮权限，将所有按钮权限整理到一个对象中，再放入缓存；
整理后如图，key代表页面，value数组对象代表该页面下所有的按钮权限；
按钮级权限封装
仅提供思路，具体做法因个人和业务需求不同而定；
思路：使用vue.directive自定义指令，通过指令输入value(按钮权限的字段)值，再判断该value值是否在上图的数组中，如果不存在通过dom操作删除该标签节点。
注意：在使用v-btn-key的时候尽量不要和v-if冲突，如果业务冲突不得已可以使用v-show，v-if会删除dom 自定义指令再去获取的时候就会报错
permissions.js
import Vue from 'vue';
import route from '../router/index';
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export const buttonPermissions = Vue.directive('btn-key',{
/**
* inserted：被绑定元素插入父节点时调用
* el：指令所绑定的元素，可以用来直接操作 DOM
* binding.value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
*/
inserted(el,binding){
let buttonKey = binding.value;
// 代表某个元素需要通过权限验证
if(buttonKey){
let key = checkKey(buttonKey)
if(!key){//没有权限
el.remove() //删除按钮
}
}else{
throw new Error('缺少唯一指令')
}
},
})
// 检测传入的元素key是否可以显示
function checkKey(key) {
// 获取权限数组
let permissionData = JSON.parse(sessionStorage.getItem("permissionData")) ? JSON.parse(sessionStorage.getItem("permissionData")) : [] ;
let nowPage = route.history.current.path.slice(1)
let lists = permissionData[nowPage]
// 如果传入的元素key不在权限数组里，则不可显示
let index = lists.indexOf(key)
if(index > -1) {
return true;
}else{
return false;
}
}
引入指令
main.js
import { buttonPermissions } from './utils/permissions'
Vue.use(buttonPermissions)
页面上的指令
<!-- course_search 是该按钮的权限string -->
<div class="u-flex flex-w w-100" v-btn-key="'course_search'"></div>
