# 权限配置
完整的权限功能需要对接权限系统 (opens new window),此处简单说明权限功能的一些基本配置。
# 配置
在 store/modules/user.js 里面进行权限的基本配置。由于权限系统的都是页面级或功能级别的权限设置,所以该系统没用到 roles 去配置权限,全部使用 permissions 进行配置。 permissions 为用户当前拥有的权限,allPermissions 为该系统在权限系统 (opens new window)设定的所有权限。
// useUserStore
state: () => ({
token: getToken(),
name: "",
roles: [],
permissions: [], // 用户当前拥有的权限
allPermissions: [
{
id: 0, // 对应权限系统的页面或功能id
permission: "demo:user:page", // 自定义权限名称
},
],
});
permissions 既可配置页面级权限,也可配置功能级权限,命名尽量语义化,以便于他人一眼能够认出是什么权限。
permissions: ["home:table:add", "home:form:edit"];
在路由里面设置对应权限:
// router
{
path: '/homePage',
component: Layout,
permissions: ['home:user:page','home:user:details'],
meta: { title: '首页', icon: 'home' },
children: [
{
path: 'index',
component: () => import('@/views/home-page/index'),
name: 'homePage',
permissions: ['home:user:page'],
meta: { title: '首页', icon: '' }
},
{
path: 'details',
component: () => import('@/views/home-page/details'),
name: 'homePageDetails',
permissions: ['home:user:details'],
hidden: true,
meta: { title: '详情', icon: '' }
}
]
}
# 示例
假设权限系统在你的管理系统下设置了 首页(id:11)、任务管理(id:22)、系统设置(id:33) 三个页面的权限,以及一个 编辑系统设置(id:44) 的功能权限。你可以像这样配置:
allPermissions: [
{
id: 11,
permission: "home:user:page",
},
{
id: 22,
permission: "task:manage:page",
},
{
id: 33,
permission: "system:user:page",
},,
{
id: 44,
permission: "system:manage:edit",
},
],
登录后会获取用户信息,拿到用户拥有的所有权限 ID 与 allPermissions 进行比对, 把对应的 permission 值存到 permissions 里。
TIP
如果权限系统配置的权限 id 是由后端管理并通过接口返回的,则需要先获取权限对应的 ID 并赋值到 allPermissions 里。