思路:
1、将后端返回的权限列表存储到localStorage中
2、在通过自定义指令接收传过来的值与后端返回值作比较
// utils/has.js
import Vue from 'vue';
const has = Vue.directive('has', {
// 当绑定的元素被插到DOM时
inserted: (el, binding) => {
/* eslint-disable */
const value = binding.value
// 将后端返回的权限列表从localStorage中取出(为一个数组)
const projectId = window.localStorage.getItem("projectId");
const { authCodes } = JSON.parse(window.localStorage.getItem("userInfor")) || {};
const authCode = projectId && authCodes[projectId];
// 判断权限列表是否包含传过来的值
if (!authCode.includes(value)) {
// 为防止用户F12查看元素修改display属性,此地方用删除元素的做法
el.remove()
}
}
})
export default has
// main.js
import Has from './utils/has'
Vue.use(Has) // 挂载到vue中
// 页面中使用
v-has='123'