vue + elementUI 自定义标签，实现按钮级别权限控制，页面刷新，权限不消失

最新推荐文章于 2023-12-25 14:34:09 发布

chenbo413026

最新推荐文章于 2023-12-25 14:34:09 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 vue

本文链接：https://blog.youkuaiyun.com/chenbo413026/article/details/103465327

本文介绍了如何在Vue项目中使用自定义指令`v-permission`来实现根据用户登录名的权限控制按钮的显示与隐藏。通过创建`src/directive/permission`目录，编写`index.js`和`permission.js`文件，定义并应用自定义指令。在刷新页面后，权限控制会消失，为了解决这个问题，可以将权限信息存储在本地缓存`sessionStorage`中，从而在刷新后仍能保留权限状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**1.自定义指令，根据登录名不同，实现按钮级别权限。

1.在src目录下新建directive目录，结构如下图。
在这里插入图片描述
2. \src\directive\permission\index.js 文件里`代码如下：

import permission from './permission'
// 全局注册自定义指令
const install = function(Vue) {
   
   
  Vue.directive('permission', permission)
}

if (window.Vue) {
   
   
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

\src\directive\permission\permission.js 文件代码如下：

export default{
   
   
  inserted(el, binding, vnode) {
   
   
    const {
   
    value } = binding
    // 自定义指令的执行函数，，取到登录缓存的按钮权限数组，赋值给全局对象userMsg
    global.ButtonPermissions = JSON.parse(sessionStorage.getItem('ButtonPermissions'))
    if (global.ButtonPermissions