57 lines
1.2 KiB
Markdown
57 lines
1.2 KiB
Markdown
|
|
|
|
## 权限控制
|
|
|
|
前端页面的权限控制有2种方式(role和permission), 在三个地方进行控制:
|
|
|
|
1. 左边菜单的显示隐藏
|
|
|
|
在路由表各项的meta中添加 roles: ['admin', 'editor'] 或 permissions: ['app:read']
|
|
|
|
2. 页面内各种按钮和弹窗
|
|
|
|
使用v-role和v-permission控制,
|
|
|
|
```vue
|
|
<!-- 支持匹配, 比如: app:*, *:read--->
|
|
<span
|
|
v-permission="['app:read']"
|
|
class="permission-alert"
|
|
>
|
|
Only
|
|
<el-tag
|
|
class="permission-tag"
|
|
size="small"
|
|
>app:read</el-tag> can see this
|
|
</span>
|
|
<el-tag
|
|
v-role="['admin']"
|
|
class="permission-sourceCode"
|
|
type="info"
|
|
>
|
|
v-role="['admin']"
|
|
</el-tag>
|
|
```
|
|
|
|
也可使用@utils/permission.ts中的checkRole和checkPermission方法
|
|
|
|
```vue
|
|
<el-tab-pane
|
|
v-if="checkRole(['admin'])"
|
|
label="Admin"
|
|
>
|
|
Admin can see this
|
|
<el-tag
|
|
class="permission-sourceCode"
|
|
type="info"
|
|
>
|
|
v-if="checkRole(['admin'])"
|
|
</el-tag>
|
|
</el-tab-pane>
|
|
```
|
|
|
|
|
|
|
|
3. 逻辑代码中判断
|
|
|
|
使用@utils/permission.ts中的checkRole和checkPermission方法 |