mirror of
https://github.com/KwiTsukasa/kt-template-admin.git
synced 2026-05-27 16:35:47 +08:00
159 lines
3.0 KiB
Markdown
159 lines
3.0 KiB
Markdown
# 权限控制详细配置
|
||
|
||
## 权限模式
|
||
|
||
### 前端访问控制（frontend）
|
||
|
||
路由权限在前端固定配置，适合角色较固定的系统。
|
||
|
||
```ts
|
||
// preferences.ts
|
||
export const overridesPreferences = defineOverridesPreferences({
|
||
app: {
|
||
accessMode: 'frontend',
|
||
},
|
||
});
|
||
|
||
// 路由配置
|
||
{
|
||
meta: {
|
||
authority: ['super', 'admin'], // 指定角色
|
||
},
|
||
}
|
||
|
||
// 登录时设置用户角色
|
||
authStore.setUserInfo({
|
||
...userInfo,
|
||
roles: ['super', 'admin'], // 必须是数组
|
||
});
|
||
```
|
||
|
||
### 后端访问控制（backend）
|
||
|
||
通过接口动态生成路由表。
|
||
|
||
```ts
|
||
// preferences.ts
|
||
export const overridesPreferences = defineOverridesPreferences({
|
||
app: {
|
||
accessMode: 'backend',
|
||
},
|
||
});
|
||
|
||
// src/router/access.ts
|
||
async function generateAccess(options: GenerateMenuAndRoutesOptions) {
|
||
return await generateAccessible(preferences.app.accessMode, {
|
||
fetchMenuListAsync: async () => {
|
||
return await getAllMenus(); // 后端返回菜单数据
|
||
},
|
||
});
|
||
}
|
||
```
|
||
|
||
后端菜单数据格式：
|
||
|
||
```ts
|
||
const menus = [
|
||
{
|
||
name: 'Dashboard',
|
||
path: '/dashboard',
|
||
component: '/dashboard/index', // 视图路径
|
||
meta: {
|
||
title: '仪表盘',
|
||
icon: 'mdi:view-dashboard',
|
||
noBasicLayout: false, // 是否不使用基础布局
|
||
},
|
||
},
|
||
];
|
||
```
|
||
|
||
### 混合访问控制（mixed）
|
||
|
||
同时使用前端和后端权限控制。
|
||
|
||
```ts
|
||
export const overridesPreferences = defineOverridesPreferences({
|
||
app: {
|
||
accessMode: 'mixed',
|
||
},
|
||
});
|
||
```
|
||
|
||
## 按钮权限控制
|
||
|
||
### 获取权限码
|
||
|
||
```ts
|
||
// src/store/auth.ts
|
||
const accessCodes = await getAccessCodes();
|
||
accessStore.setAccessCodes(accessCodes);
|
||
// 返回格式: ['AC_100100', 'AC_100110', 'AC_100120']
|
||
```
|
||
|
||
### 组件方式
|
||
|
||
```vue
|
||
<script setup>
|
||
import { AccessControl } from '@vben/access';
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 权限码方式 -->
|
||
<AccessControl :codes="['AC_100100']" type="code">
|
||
<Button>有权限可见</Button>
|
||
</AccessControl>
|
||
|
||
<!-- 角色方式 -->
|
||
<AccessControl :codes="['super', 'admin']">
|
||
<Button>管理员可见</Button>
|
||
</AccessControl>
|
||
</template>
|
||
```
|
||
|
||
### API 方式
|
||
|
||
```vue
|
||
<script setup>
|
||
import { useAccess } from '@vben/access';
|
||
|
||
const { hasAccessByCodes, hasAccessByRoles } = useAccess();
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 权限码判断 -->
|
||
<Button v-if="hasAccessByCodes(['AC_100100'])">有权限可见</Button>
|
||
|
||
<!-- 角色判断 -->
|
||
<Button v-if="hasAccessByRoles(['admin'])">管理员可见</Button>
|
||
|
||
<!-- 多权限满足其一 -->
|
||
<Button v-if="hasAccessByCodes(['AC_100100', 'AC_100110'])">
|
||
任一权限可见
|
||
</Button>
|
||
</template>
|
||
```
|
||
|
||
### 指令方式
|
||
|
||
```vue
|
||
<template>
|
||
<!-- 权限码指令 -->
|
||
<Button v-access:code="'AC_100100'">单个权限码</Button>
|
||
<Button v-access:code="['AC_100100', 'AC_100110']">多个权限码</Button>
|
||
|
||
<!-- 角色指令 -->
|
||
<Button v-access:role="'super'">单个角色</Button>
|
||
<Button v-access:role="['super', 'admin']">多个角色</Button>
|
||
</template>
|
||
```
|
||
|
||
## 菜单可见但禁止访问
|
||
|
||
```ts
|
||
{
|
||
meta: {
|
||
menuVisibleWithForbidden: true, // 菜单可见，访问跳转403
|
||
},
|
||
}
|
||
```
|