增加前端页面的文档说明

This commit is contained in:
zhl 2021-01-20 18:58:27 +08:00
parent b6594cdf3b
commit ff0f2b0cfa
3 changed files with 77 additions and 21 deletions

View File

@ -0,0 +1,57 @@
## 权限控制
前端页面的权限控制有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方法

View File

@ -87,19 +87,6 @@ export const constantRoutes: RouteConfig[] = [
} }
] ]
}, },
// {
// path: '/documentation',
// component: Layout,
// children: [
// {
// path: 'index',
// component: () => import(/* webpackChunkName: "documentation" */ '@/views/documentation/index.vue'),
// name: 'Documentation',
// meta: { title: 'documentation', icon: 'documentation', affix: true }
// }
// ]
// },
{ {
path: '/profile', path: '/profile',
component: Layout, component: Layout,
@ -125,14 +112,23 @@ export const constantRoutes: RouteConfig[] = [
* the routes that need to be dynamically loaded based on user roles * the routes that need to be dynamically loaded based on user roles
*/ */
export const asyncRoutes: RouteConfig[] = [ export const asyncRoutes: RouteConfig[] = [
{
path: '/system',
component: Layout,
redirect: '/system/list',
meta: {
title: '',
icon: 'lock',
alwaysShow: true
}
},
{ {
path: '/permission', path: '/permission',
component: Layout, component: Layout,
redirect: '/permission/directive', redirect: '/permission/directive1',
meta: { meta: {
title: 'permission', title: 'permission',
icon: 'lock', icon: 'lock',
roles: ['admin', 'editor'], // you can set roles in root nav
alwaysShow: true // will always show the root menu alwaysShow: true // will always show the root menu
}, },
children: [ children: [
@ -150,8 +146,8 @@ export const asyncRoutes: RouteConfig[] = [
component: () => import(/* webpackChunkName: "permission-directive" */ '@/views/permission/directive.vue'), component: () => import(/* webpackChunkName: "permission-directive" */ '@/views/permission/directive.vue'),
name: 'DirectivePermission', name: 'DirectivePermission',
meta: { meta: {
title: 'directivePermission' title: 'directivePermission',
// if do not set roles, means: this page does not require permission permissions: ['app:update']
} }
}, },
{ {

View File

@ -5,25 +5,28 @@ import store from '@/store'
import { checkPermission } from '@/utils/permission' import { checkPermission } from '@/utils/permission'
const hasRole = (roles: string[], route: RouteConfig) => { const hasRole = (roles: string[], route: RouteConfig) => {
if (route.meta && route.meta.roles) { if (route.meta?.roles) {
return roles.some(role => route.meta.roles.includes(role)) return roles.some(role => route.meta.roles.includes(role))
} else { } else {
return true return false
} }
} }
const hasPermission = (route: RouteConfig) => { const hasPermission = (route: RouteConfig) => {
if (route.meta?.permissions) { if (route.meta?.permissions) {
return checkPermission(route.meta?.permissions) return checkPermission(route.meta?.permissions)
} else { } else {
return true return false
} }
} }
const defaultPublic = (route: RouteConfig) => {
return !route.meta?.roles && !route.meta?.permissions
}
export const filterAsyncRoutes = (routes: RouteConfig[], roles: string[]) => { export const filterAsyncRoutes = (routes: RouteConfig[], roles: string[]) => {
const res: RouteConfig[] = [] const res: RouteConfig[] = []
routes.forEach(route => { routes.forEach(route => {
const r = { ...route } const r = { ...route }
if (hasRole(roles, r) || hasPermission(r)) { if ((hasRole(roles, r) || hasPermission(r)) || defaultPublic(r)) {
if (r.children) { if (r.children) {
r.children = filterAsyncRoutes(r.children, roles) r.children = filterAsyncRoutes(r.children, roles)
} }