增加前端页面的文档说明

README.md

@@ -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方法

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'
+          title: 'directivePermission',
-          // if do not set roles, means: this page does not require permission
+          permissions: ['app:update']
         }
       },
       {

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)
       }