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>