- 角色模型改为 permissions 字段,移除 methods/includeUri/excludeUri - 角色管理页面支持权限树选择,保存时只传最上级权限 - /common/verifyToken 返回 permissions,存入 vuex - 新增 v-permission 指令,所有操作按钮和菜单均按权限控制显示 - 菜单按 list 权限过滤 - 各业务页面按钮加权限指令 - 角色管理列表只显示名称/描述/时间,不显示权限列,权限必选
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import type { Directive } from 'vue'
|
||
import store from '@/store'
|
||
|
||
/**
|
||
* 检查用户是否具备指定权限
|
||
* 支持上下级关系:如果用户拥有 'user' 权限,则 'user:list' 也视为拥有
|
||
*/
|
||
export function hasPermission(permission: string): boolean {
|
||
const permissions: string[] = store.state.loginInfo.permissions
|
||
if (!permissions || !permissions.length) return false
|
||
// 直接匹配
|
||
if (permissions.includes(permission)) return true
|
||
// 上级权限匹配:如果权限是 'user:list',检查用户是否拥有 'user'
|
||
const colonIndex = permission.indexOf(':')
|
||
if (colonIndex !== -1) {
|
||
const parent = permission.substring(0, colonIndex)
|
||
if (permissions.includes(parent)) return true
|
||
}
|
||
return false
|
||
}
|
||
|
||
/**
|
||
* v-permission 自定义指令
|
||
* 用法:v-permission="'user:save'" 或 v-permission="['user:save', 'user:delete']"
|
||
* 当传入数组时,满足其中任一权限即可显示
|
||
*/
|
||
export const permissionDirective: Directive<HTMLElement, string | string[]> = {
|
||
mounted(el, binding) {
|
||
const value = binding.value
|
||
if (!value) return
|
||
const permissions = Array.isArray(value) ? value : [value]
|
||
const hasPerm = permissions.some(p => hasPermission(p))
|
||
if (!hasPerm) {
|
||
el.parentNode?.removeChild(el)
|
||
}
|
||
}
|
||
}
|