vue3 指令鉴权（权限控制）_手把手 vue3 路由鉴权 haspermission

权限控制

<hasPerm.js>
import useUserStore from '@/store/modules/user'
export default {
  mounted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*-*-*";
    const permissions = useUserStore().permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<store->user.js>
//拿到permissions对象列表
// 获取用户信息
      getInfo() {
        return new Promise((resolve, reject) => {
          getInfo().then(res => {
            const user = res.user
            const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;

            if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
              this.roles = res.roles
              this.permissions  = res.permissions
            } else {
              this.roles = ['ROLE_DEFAULT']
            }
            this.name = user.userName
            this.avatar = avatar;
            resolve(res)
          }).catch(error => {
            reject(error)
          })
        })
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

引入：app全局（index.js）
1

import hasPerm from './hasPerm'

export default function directive(app){
  app.directive('hasPerm', hasPerm)
}
1
2
3
4
5

使用如下：
['tool-gen-code']就等于上面hasPerm.js-->mounted中的binding.value
1
2

<el-button
          type="primary"
          plain
          v-hasPerm="['tool-gen-code']"
        >按钮</el-button>
1
2
3
4
5

大致流程：首先在store中存储用户具有的权限列表，然后在hasPerm.js中引入该权限列表进行权限过滤，然后将所写逻辑导出，在index.js中引入注册全局指令。
1

最后展示一下目录：