1.登录存入localStorage
localStorage.setItem('buttonList', JSON.stringify(res.data.menuList));
后台数据格式:
[
{
"checked":false,
"component":"",
"createTime":"2022-11-29 18:21:06",
"createUser":"026a564bbfd84861ac4b65393644beef",
"icon":"",
"id":"1503273153861066776",
"name":"搜索",
"open":"true",
"parentId":"2328050996633395469",
"parentName":"测试页",
"perms":"sys:index:vol",
"sort":103,
"status":"0",
"type":"2",
"updateTime":"2022-11-27 15:51:15",
"updateUser":"026a564bbfd84861ac4b65393644beef",
"url":""
}
]
2.前端
/utils/ 目录下新增hasPermission.js
export const hasPermission = {
install(Vue) {
//自定义指令v-has:
Vue.directive('has', {
mounted(el, binding, vnode) {
console.log("binding")
console.log(binding.value)
if (!checkPermission(binding.value)) {
el.parentNode && el.parentNode.removeChild(el)
}
},
});
//权限检查方法
function checkPermission(value) {
/** 存放value值 */
const btn_permission = value;
let userlogin = JSON.parse(localStorage.getItem("buttonList") || "[]");
// console.log(localStorage.getItem("buttonList"))
//判断是否按钮有权限
var hasPermissions = userlogin.some(permission => {
return btn_permission == permission.perms
})
return hasPermissions;
}
}
};
export default hasPermission;
3.main.js 增加以下行:
import { hasPermission } from './utils/hasPermission.js'
后面增加这个
app..use(hasPermission);
4.页面应用:
<el-form-item>
<el-button v-has="['sys:role:search']" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button v-has="['sys:role:reset']" icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>