diff --git a/README.md b/README.md index e69de29..ff8dd78 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,57 @@ + + +## 权限控制 + +前端页面的权限控制有2种方式(role和permission), 在三个地方进行控制: + +1. 左边菜单的显示隐藏 + + 在路由表各项的meta中添加 roles: ['admin', 'editor'] 或 permissions: ['app:read'] + +2. 页面内各种按钮和弹窗 + + 使用v-role和v-permission控制, + + ```vue + + + Only + app:read can see this + + + v-role="['admin']" + + ``` + + 也可使用@utils/permission.ts中的checkRole和checkPermission方法 + + ```vue + + Admin can see this + + v-if="checkRole(['admin'])" + + + ``` + + + +3. 逻辑代码中判断 + + 使用@utils/permission.ts中的checkRole和checkPermission方法 \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 8b17179..aea3d9d 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -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', component: Layout, @@ -125,14 +112,23 @@ export const constantRoutes: RouteConfig[] = [ * the routes that need to be dynamically loaded based on user roles */ export const asyncRoutes: RouteConfig[] = [ + { + path: '/system', + component: Layout, + redirect: '/system/list', + meta: { + title: '', + icon: 'lock', + alwaysShow: true + } + }, { path: '/permission', component: Layout, - redirect: '/permission/directive', + redirect: '/permission/directive1', meta: { title: 'permission', icon: 'lock', - roles: ['admin', 'editor'], // you can set roles in root nav alwaysShow: true // will always show the root menu }, children: [ @@ -150,8 +146,8 @@ export const asyncRoutes: RouteConfig[] = [ component: () => import(/* webpackChunkName: "permission-directive" */ '@/views/permission/directive.vue'), name: 'DirectivePermission', meta: { - title: 'directivePermission' - // if do not set roles, means: this page does not require permission + title: 'directivePermission', + permissions: ['app:update'] } }, { diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index e8eec60..53efb95 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -5,25 +5,28 @@ import store from '@/store' import { checkPermission } from '@/utils/permission' 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)) } else { - return true + return false } } const hasPermission = (route: RouteConfig) => { if (route.meta?.permissions) { return checkPermission(route.meta?.permissions) } else { - return true + return false } } +const defaultPublic = (route: RouteConfig) => { + return !route.meta?.roles && !route.meta?.permissions +} export const filterAsyncRoutes = (routes: RouteConfig[], roles: string[]) => { const res: RouteConfig[] = [] routes.forEach(route => { const r = { ...route } - if (hasRole(roles, r) || hasPermission(r)) { + if ((hasRole(roles, r) || hasPermission(r)) || defaultPublic(r)) { if (r.children) { r.children = filterAsyncRoutes(r.children, roles) }