修改
后台使用的是若依系统,最近需要通过后台控制菜单、按钮权限;浅浅记录一下。
首utils先在后台系统设置好按钮权限字符等信息
创建文件夹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
})
在登录之后,获取登录信息,包括角色,权限字符等
//获取信息
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>