vue3 前端权限控制（按钮） 规范版

修改

后台使用的是若依系统，最近需要通过后台控制菜单、按钮权限；浅浅记录一下。

1. 首utils先在后台系统设置好按钮权限字符等信息

2. 创建文件夹store->permission.ts

持久化存储后端返回的权限信息，这里只关注permissions

import { defineStore } from 'pinia'
export const permissionStore = defineStore('permission', {
  state: (): {
    userState: {
      roles: []
      permissions: []
      tokenKey: ''
      user: {}
    }
  } => {
    return {
      userState: {
        roles: [],
        permissions: [],
        tokenKey: '',
        user: {}
      }
    }
  },
  actions: {
    setInfo(info: { permissions: []; roles: []; tokenKey: ''; user: {} }) {
      this.userState.permissions = info.permissions
      this.userState.roles = info.roles
      this.userState.tokenKey = info.tokenKey
      this.userState.user = info.user
    },
    getPermissions() {
      return this.userState.permissions
    }
  },
  persist: true
})

3. 在登录之后，获取登录信息，包括角色，权限字符等

        //获取信息
        getInfo().then((res) => {
          const _permissionStore = permissionStore()
          _permissionStore.setInfo({
            permissions: res.permissions,
            roles: res.roles,
            tokenKey: res.tokenKey,
            user: res.user
          })
        })

4、utils文件夹中建立directive文件夹-->index.ts

import { permissionStore } from '@/store/permission'

import { debounce as _debounce } from 'lodash-es'
import { App, Directive } from 'vue'

const permission: Directive = {
  mounted: (el, binding, vnode) => {
    const store = permissionStore()
    const { value } = binding
    const all_permission = '*:*:*'
    const permissions = store.getPermissions()
    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(`请设置操作权限标签值`)
    }
  }
}
const install = function (Vue: App<Element>) {

  Vue.directive('permission', permission)
}
export default install

5、main.ts注册使用

import directive from './utils/directive'
app.use(directive)

6、组件中使用

v-permission="['system:user:add']"

其中system:user:add是菜单管理中设置的权限字符

            <el-col :span="1.5">
              <el-button
                class="add_btn"
                type="primary"
                v-permission="['system:user:add']"
                @click="createFrom"
                >新增</el-button
              >
            </el-col>