Merge branch 'feature/dynamic-permission'

2019-02-15 11:43:48 +08:00 · 2019-02-15 11:43:48 +08:00 · b65962d7e5
parent 8c18c000d4 285a4e7463
commit b65962d7e5
12 changed files with 1133 additions and 310 deletions
--- a/src/api/role.js
+++ b/src/api/role.js
@ -0,0 +1,31 @@
+import request from '@/utils/request'
+
+export function fetchRoles() {
+  return request({
+    url: '/roles',
+    method: 'get'
+  })
+}
+
+export function deleteRole(id) {
+  return request({
+    url: `/roles/${id}`,
+    method: 'delete'
+  })
+}
+
+export function newRole(data) {
+  return request({
+    url: '/roles',
+    method: 'post',
+    data
+  })
+}
+
+export function updateRole(id, data) {
+  return request({
+    url: `/roles/${id}`,
+    method: 'put',
+    data
+  })
+}
--- a/src/api/routes.js
+++ b/src/api/routes.js
@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function fetchAsyncRoutes() {
+  return request({
+    url: '/routes',
+    method: 'get'
+  })
+}
--- a/src/lang/en.js
+++ b/src/lang/en.js
@ -6,6 +6,7 @@ export default {
    guide: 'Guide',
    permission: 'Permission',
    pagePermission: 'Page Permission',
+    rolePermission: 'Role Permission',
    directivePermission: 'Directive Permission',
    icons: 'Icons',
    components: 'Components',
@ -86,9 +87,14 @@ export default {
    github: 'Github Repository'
  },
  permission: {
+    newRole: 'New Role',
+    editPermission: 'Edit Permission',
    roles: 'Your roles',
    switchRoles: 'Switch roles',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    delete: 'Delete',
+    confirm: 'Confirm',
+    cancel: 'Cancel'
  },
  guide: {
    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
--- a/src/lang/es.js
+++ b/src/lang/es.js
@ -5,6 +5,7 @@ export default {
    documentation: 'Documentación',
    guide: 'Guía',
    permission: 'Permisos',
+    rolePermission: 'Permisos de rol',
    pagePermission: 'Permisos de la página',
    directivePermission: 'Permisos de la directiva',
    icons: 'Iconos',
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@ -5,6 +5,7 @@ export default {
    documentation: '文档',
    guide: '引导页',
    permission: '权限测试页',
+    rolePermission: '角色权限',
    pagePermission: '页面权限',
    directivePermission: '指令权限',
    icons: '图标',
@ -86,9 +87,14 @@ export default {
    github: 'Github 地址'
  },
  permission: {
+    newRole: '新增角色',
+    editPermission: '编辑权限',
    roles: '你的权限',
    switchRoles: '切换权限',
-    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。'
+    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
+    delete: '删除',
+    confirm: '确定',
+    cancel: '取消'
  },
  guide: {
    description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
--- a/src/mock/index.js
+++ b/src/mock/index.js
@ -3,6 +3,8 @@ import loginAPI from './login'
 import articleAPI from './article'
 import remoteSearchAPI from './remoteSearch'
 import transactionAPI from './transaction'
+import routesAPI from './routes'
+import roleAPI from './role'

 // 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
 // https://github.com/nuysoft/Mock/issues/300
@ -18,11 +20,20 @@ Mock.XHR.prototype.send = function() {
 //   timeout: '350-600'
 // })

+// 路由相关
+Mock.mock(/\/routes/, 'get', routesAPI.getAsyncRoutesMap)
+
 // 登录相关
 Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
 Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
 Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)

+// 角色相关
+Mock.mock(/\/roles/, 'get', roleAPI.getRoles)
+Mock.mock(/\/roles$/, 'post', roleAPI.newRole)
+Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'put', roleAPI.updateRole)
+Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'delete', roleAPI.deleteRole)
+
 // 文章相关
 Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
 Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
--- a/src/mock/role.js
+++ b/src/mock/role.js
@ -0,0 +1,174 @@
+import Mock from 'mockjs'
+
+// admin 角色可以访问所有菜单
+const roles = [
+  {
+    id: 'editor', // 角色id
+    name: 'editor',
+    description: '编辑',
+    accessibleRoutes: [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      '13',
+      '14',
+      '15',
+      '16',
+      '17',
+      '18',
+      '19',
+      '20',
+      '21',
+      '22',
+      '23',
+      '24',
+      '25',
+      '26',
+      '27',
+      '28',
+      '29',
+      '30',
+      '31',
+      '32',
+      '33',
+      '34',
+      '35',
+      '36',
+      '37',
+      '38',
+      '39',
+      '40',
+      '41',
+      '42',
+      '43',
+      '44',
+      '45',
+      '46',
+      '47',
+      '48',
+      '49',
+      '50',
+      '51',
+      '52',
+      '53',
+      '54',
+      '55',
+      '56',
+      '57',
+      '58',
+      '59',
+      '60',
+      '61',
+      '62',
+      '63',
+      '64',
+      '65',
+      '66',
+      '67'
+    ] // 可访问的菜单id列表
+  },
+  {
+    id: 'operator', // 角色id
+    name: 'operator',
+    description: '运营',
+    accessibleRoutes: [
+      '1',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      '13',
+      '14',
+      '15',
+      '16',
+      '17',
+      '18',
+      '19',
+      '20',
+      '21',
+      '22',
+      '23',
+      '24',
+      '25',
+      '26',
+      '27',
+      '28',
+      '29',
+      '30',
+      '31',
+      '32',
+      '33',
+      '34',
+      '35',
+      '36',
+      '37',
+      '38',
+      '39',
+      '40',
+      '41',
+      '42',
+      '43',
+      '44',
+      '45',
+      '46',
+      '47',
+      '48',
+      '49',
+      '50',
+      '51',
+      '52',
+      '53',
+      '54',
+      '55',
+      '56',
+      '57',
+      '58',
+      '59',
+      '60',
+      '61',
+      '62',
+      '63',
+      '64',
+      '65'
+    ] // 可访问的菜单id列表
+  }
+]
+
+export default {
+  getRoles() {
+    return roles
+  },
+  newRole() {
+    const res = {
+      data: Mock.mock('id')
+    }
+    return res
+  },
+  updateRole() {
+    const res = {
+      data: 'success'
+    }
+    return res
+  },
+  deleteRole() {
+    const res = {
+      data: 'success'
+    }
+    return res
+  }
+}
--- a/src/mock/routes.js
+++ b/src/mock/routes.js
@ -0,0 +1,581 @@
+const asyncRoutesMap = [
+  {
+    id: '1',
+    path: '/permission',
+    component: 'layout/Layout',
+    redirect: '/permission/index',
+    alwaysShow: true, // will always show the root menu
+    meta: {
+      title: 'permission',
+      icon: 'lock',
+      roles: ['admin', 'editor'] // you can set roles in root nav
+    },
+    children: [
+      {
+        id: '2',
+        path: 'page',
+        component: 'permission/page',
+        name: 'PagePermission',
+        meta: {
+          title: 'pagePermission',
+          roles: ['admin']
+        }
+      },
+      {
+        id: '3',
+        path: 'directive',
+        component: 'permission/directive',
+        name: 'DirectivePermission',
+        meta: {
+          title: 'directivePermission',
+          roles: ['admin', 'editor']
+        }
+      },
+      {
+        id: '66',
+        path: 'role',
+        component: 'permission/role',
+        name: 'role',
+        meta: {
+          title: 'rolePermission',
+          roles: ['admin']
+        }
+      }
+    ]
+  },
+
+  {
+    id: '4',
+    path: '/icon',
+    component: 'layout/Layout',
+    children: [
+      {
+        id: '5',
+        path: 'index',
+        component: 'svg-icons/index',
+        name: 'Icons',
+        meta: { title: 'icons', icon: 'icon', noCache: true, roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+  {
+    id: '6',
+    path: '/components',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    name: 'ComponentDemo',
+    meta: {
+      title: 'components',
+      icon: 'component',
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '7',
+        path: 'tinymce',
+        component: 'components-demo/tinymce',
+        name: 'TinymceDemo',
+        meta: { title: 'tinymce', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '8',
+        path: 'markdown',
+        component: 'components-demo/markdown',
+        name: 'MarkdownDemo',
+        meta: { title: 'markdown', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '9',
+        path: 'json-editor',
+        component: 'components-demo/jsonEditor',
+        name: 'JsonEditorDemo',
+        meta: { title: 'jsonEditor', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '10',
+        path: 'splitpane',
+        component: 'components-demo/splitpane',
+        name: 'SplitpaneDemo',
+        meta: { title: 'splitPane', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '11',
+        path: 'avatar-upload',
+        component: 'components-demo/avatarUpload',
+        name: 'AvatarUploadDemo',
+        meta: { title: 'avatarUpload', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '12',
+        path: 'dropzone',
+        component: 'components-demo/dropzone',
+        name: 'DropzoneDemo',
+        meta: { title: 'dropzone', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '13',
+        path: 'sticky',
+        component: 'components-demo/sticky',
+        name: 'StickyDemo',
+        meta: { title: 'sticky', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '14',
+        path: 'count-to',
+        component: 'components-demo/countTo',
+        name: 'CountToDemo',
+        meta: { title: 'countTo', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '15',
+        path: 'mixin',
+        component: 'components-demo/mixin',
+        name: 'ComponentMixinDemo',
+        meta: { title: 'componentMixin', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '16',
+        path: 'back-to-top',
+        component: 'components-demo/backToTop',
+        name: 'BackToTopDemo',
+        meta: { title: 'backToTop', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '17',
+        path: 'drag-dialog',
+        component: 'components-demo/dragDialog',
+        name: 'DragDialogDemo',
+        meta: { title: 'dragDialog', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '18',
+        path: 'drag-select',
+        component: 'components-demo/dragSelect',
+        name: 'DragSelectDemo',
+        meta: { title: 'dragSelect', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '19',
+        path: 'dnd-list',
+        component: 'components-demo/dndList',
+        name: 'DndListDemo',
+        meta: { title: 'dndList', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '20',
+        path: 'drag-kanban',
+        component: 'components-demo/dragKanban',
+        name: 'DragKanbanDemo',
+        meta: { title: 'dragKanban', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+  {
+    id: '21',
+    path: '/charts',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    name: 'Charts',
+    meta: {
+      title: 'charts',
+      icon: 'chart',
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '22',
+        path: 'keyboard',
+        component: 'charts/keyboard',
+        name: 'KeyboardChart',
+        meta: { title: 'keyboardChart', noCache: true, roles: ['admin', 'editor'] }
+      },
+      {
+        id: '23',
+        path: 'line',
+        component: 'charts/line',
+        name: 'LineChart',
+        meta: { title: 'lineChart', noCache: true, roles: ['admin', 'editor'] }
+      },
+      {
+        id: '24',
+        path: 'mixchart',
+        component: 'charts/mixChart',
+        name: 'MixChart',
+        meta: { title: 'mixChart', noCache: true, roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+  {
+    id: '25',
+    path: '/nested',
+    component: 'layout/Layout',
+    redirect: '/nested/menu1/menu1-1',
+    name: 'Nested',
+    meta: {
+      title: 'nested',
+      icon: 'nested',
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '26',
+        path: 'menu1',
+        component: 'nested/menu1/index', // Parent router-view
+        name: 'Menu1',
+        meta: { title: 'menu1', roles: ['admin', 'editor'] },
+        redirect: '/nested/menu1/menu1-1',
+        children: [
+          {
+            id: '27',
+            path: 'menu1-1',
+            component: 'nested/menu1/menu1-1',
+            name: 'Menu1-1',
+            meta: { title: 'menu1-1', roles: ['admin', 'editor'] }
+          },
+          {
+            id: '28',
+            path: 'menu1-2',
+            component: 'nested/menu1/menu1-2',
+            name: 'Menu1-2',
+            redirect: '/nested/menu1/menu1-2/menu1-2-1',
+            meta: { title: 'menu1-2', roles: ['admin', 'editor'] },
+            children: [
+              {
+                id: '29',
+                path: 'menu1-2-1',
+                component: 'nested/menu1/menu1-2/menu1-2-1',
+                name: 'Menu1-2-1',
+                meta: { title: 'menu1-2-1', roles: ['admin', 'editor'] }
+              },
+              {
+                id: '30',
+                path: 'menu1-2-2',
+                component: 'nested/menu1/menu1-2/menu1-2-2',
+                name: 'Menu1-2-2',
+                meta: { title: 'menu1-2-2', roles: ['admin', 'editor'] }
+              }
+            ]
+          },
+          {
+            id: '31',
+            path: 'menu1-3',
+            component: 'nested/menu1/menu1-3',
+            name: 'Menu1-3',
+            meta: { title: 'menu1-3', roles: ['admin', 'editor'] }
+          }
+        ]
+      },
+      {
+        id: '32',
+        path: 'menu2',
+        name: 'Menu2',
+        component: 'nested/menu2/index',
+        meta: { title: 'menu2', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+  {
+    id: '33',
+    path: '/table',
+    component: 'layout/Layout',
+    redirect: '/table/complex-table',
+    name: 'Table',
+    meta: {
+      title: 'Table',
+      icon: 'table',
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '34',
+        path: 'dynamic-table',
+        component: 'table/dynamicTable/index',
+        name: 'DynamicTable',
+        meta: { title: 'dynamicTable', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '35',
+        path: 'drag-table',
+        component: 'table/dragTable',
+        name: 'DragTable',
+        meta: { title: 'dragTable', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '36',
+        path: 'inline-edit-table',
+        component: 'table/inlineEditTable',
+        name: 'InlineEditTable',
+        meta: { title: 'inlineEditTable', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '37',
+        path: 'tree-table',
+        component: 'table/treeTable/treeTable',
+        name: 'TreeTableDemo',
+        meta: { title: 'treeTable', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '38',
+        path: 'custom-tree-table',
+        component: 'table/treeTable/customTreeTable',
+        name: 'CustomTreeTableDemo',
+        meta: { title: 'customTreeTable', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '39',
+        path: 'complex-table',
+        component: 'table/complexTable',
+        name: 'ComplexTable',
+        meta: { title: 'complexTable', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+  {
+    id: '40',
+    path: '/example',
+    component: 'layout/Layout',
+    redirect: '/example/list',
+    name: 'Example',
+    meta: {
+      title: 'example',
+      icon: 'example',
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '41',
+        path: 'create',
+        component: 'example/create',
+        name: 'CreateArticle',
+        meta: { title: 'createArticle', icon: 'edit', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '42',
+        path: 'edit/:id(\\d+)',
+        component: 'example/edit',
+        name: 'EditArticle',
+        meta: { title: 'editArticle', noCache: true, roles: ['admin', 'editor'] },
+        hidden: true
+      },
+      {
+        id: '43',
+        path: 'list',
+        component: 'example/list',
+        name: 'ArticleList',
+        meta: { title: 'articleList', icon: 'list', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+
+  {
+    path: '/tab',
+    component: 'layout/Layout',
+    children: [
+      {
+        id: '44',
+        path: 'index',
+        component: 'tab/index',
+        name: 'Tab',
+        meta: { title: 'tab', icon: 'tab', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+  {
+    id: '45',
+    path: '/error',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    name: 'ErrorPages',
+    meta: {
+      title: 'errorPages',
+      icon: '404',
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '46',
+        path: '401',
+        component: 'errorPage/401',
+        name: 'Page401',
+        meta: { title: 'page401', noCache: true, roles: ['admin', 'editor'] }
+      },
+      {
+        id: '47',
+        path: '404',
+        component: 'errorPage/404',
+        name: 'Page404',
+        meta: { title: 'page404', noCache: true, roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+
+  {
+    id: '48',
+    path: '/error-log',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    children: [
+      {
+        id: '67',
+        path: 'log',
+        component: 'errorLog/index',
+        name: 'ErrorLog',
+        meta: { title: 'errorLog', icon: 'bug', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+
+  {
+    id: '49',
+    path: '/excel',
+    component: 'layout/Layout',
+    redirect: '/excel/export-excel',
+    name: 'Excel',
+    meta: {
+      title: 'excel',
+      icon: 'excel',
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '50',
+        path: 'export-excel',
+        component: 'excel/exportExcel',
+        name: 'ExportExcel',
+        meta: { title: 'exportExcel', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '51',
+        path: 'export-selected-excel',
+        component: 'excel/selectExcel',
+        name: 'SelectExcel',
+        meta: { title: 'selectExcel', roles: ['admin', 'editor'] }
+      },
+      {
+        id: '52',
+        path: 'upload-excel',
+        component: 'excel/uploadExcel',
+        name: 'UploadExcel',
+        meta: { title: 'uploadExcel', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+
+  {
+    id: '53',
+    path: '/zip',
+    component: 'layout/Layout',
+    redirect: '/zip/download',
+    alwaysShow: true,
+    meta: { title: 'zip', icon: 'zip', roles: ['admin', 'editor'] },
+    children: [
+      {
+        id: '54',
+        path: 'download',
+        component: 'zip/index',
+        name: 'ExportZip',
+        meta: { title: 'exportZip', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+
+  {
+    id: '55',
+    path: '/pdf',
+    component: 'layout/Layout',
+    redirect: '/pdf/index',
+    children: [
+      {
+        id: '56',
+        path: 'index',
+        component: 'pdf/index',
+        name: 'PDF',
+        meta: { title: 'pdf', icon: 'pdf', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+  {
+    id: '57',
+    path: '/pdf/download',
+    component: 'pdf/download',
+    hidden: true
+  },
+
+  {
+    id: '58',
+    path: '/theme',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    meta: {
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '59',
+        path: 'index',
+        component: 'theme/index',
+        name: 'Theme',
+        meta: { title: 'theme', icon: 'theme', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+
+  {
+    id: '60',
+    path: '/clipboard',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    meta: {
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '61',
+        path: 'index',
+        component: 'clipboard/index',
+        name: 'ClipboardDemo',
+        meta: { title: 'clipboardDemo', icon: 'clipboard', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+
+  {
+    id: '62',
+    path: '/i18n',
+    component: 'layout/Layout',
+    meta: {
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '63',
+        path: 'index',
+        component: 'i18n-demo/index',
+        name: 'I18n',
+        meta: { title: 'i18n', icon: 'international', roles: ['admin', 'editor'] }
+      }
+    ]
+  },
+
+  {
+    id: '64',
+    path: 'external-link',
+    component: 'layout/Layout',
+    meta: {
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        id: '65',
+        path: 'https://github.com/PanJiaChen/vue-element-admin',
+        meta: { title: 'externalLink', icon: 'link', roles: ['admin', 'editor'] }
+      }
+    ]
+  }
+]
+
+export default {
+  getAsyncRoutesMap() {
+    return asyncRoutesMap
+  }
+}
--- a/src/permission.js
+++ b/src/permission.js
@ -2,41 +2,48 @@ import router from './router'
 import store from './store'
 import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css'// progress bar style
+import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // getToken from cookie

-NProgress.configure({ showSpinner: false })// NProgress Configuration
+NProgress.configure({ showSpinner: false }) // NProgress Configuration

 // permission judge function
 function hasPermission(roles, permissionRoles) {
-  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
+  if (roles.findIndex(role => role === 'admin') >= 0) return true // admin permission passed directly
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
 }

-const whiteList = ['/login', '/auth-redirect']// no redirect whitelist
+const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist

 router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
-  if (getToken()) { // determine if there has token
+  if (getToken()) {
+    // determine if there has token
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
    } else {
-      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
-          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
-          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
-            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
+      if (store.getters.roles.length === 0) {
+        // 判断当前用户是否已拉取完user_info信息
+        store
+          .dispatch('GetUserInfo')
+          .then(res => {
+            // 拉取user_info
+            const roles = res.data.roles // note: roles must be a object array! such as: [{id: '1', name: 'editor'}, {id: '2', name: 'developer'}]
+            store.dispatch('GenerateRoutes', { roles }).then(excessRoutes => {
+              // 根据roles权限生成可访问的路由表
+              router.addRoutes(excessRoutes) // 动态添加可访问路由表
+              next({ ...to, replace: true }) // hack方法 确保addRouters已完成 ,set the replace: true so the navigation will not leave a history record
+            })
          })
-        }).catch((err) => {
-          store.dispatch('FedLogOut').then(() => {
-            Message.error(err)
-            next({ path: '/' })
+          .catch(err => {
+            store.dispatch('FedLogOut').then(() => {
+              Message.error(err)
+              next({ path: '/' })
+            })
          })
-        })
      } else {
        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
        if (hasPermission(store.getters.roles, to.meta.roles)) {
@ -49,7 +56,8 @@ router.beforeEach((to, from, next) => {
    }
  } else {
    /* has no token*/
-    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
+    if (whiteList.indexOf(to.path) !== -1) {
+      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
--- a/src/router/index.js
+++ b/src/router/index.js
@ -6,12 +6,6 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/views/layout/Layout'

-/* Router Modules */
-import componentsRouter from './modules/components'
-import chartsRouter from './modules/charts'
-import tableRouter from './modules/table'
-import nestedRouter from './modules/nested'
-
 /** note: Submenu only appear when children.length>=1
 *  detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 **/
@ -31,7 +25,7 @@ import nestedRouter from './modules/nested'
    breadcrumb: false            if false, the item will hidden in breadcrumb(default is true)
  }
 **/
-export const constantRouterMap = [
+export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
@ -104,265 +98,10 @@ export const constantRouterMap = [
  }
 ]

+export const generalRoutes = [{ path: '*', redirect: '/404', hidden: true }]
+
 export default new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRouterMap
+  routes: constantRoutes
 })
-
-export const asyncRouterMap = [
-  {
-    path: '/permission',
-    component: Layout,
-    redirect: '/permission/index',
-    alwaysShow: true, // will always show the root menu
-    meta: {
-      title: 'permission',
-      icon: 'lock',
-      roles: ['admin', 'editor'] // you can set roles in root nav
-    },
-    children: [
-      {
-        path: 'page',
-        component: () => import('@/views/permission/page'),
-        name: 'PagePermission',
-        meta: {
-          title: 'pagePermission',
-          roles: ['admin'] // or you can only set roles in sub nav
-        }
-      },
-      {
-        path: 'directive',
-        component: () => import('@/views/permission/directive'),
-        name: 'DirectivePermission',
-        meta: {
-          title: 'directivePermission'
-          // if do not set roles, means: this page does not require permission
-        }
-      }
-    ]
-  },
-
-  {
-    path: '/icon',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/svg-icons/index'),
-        name: 'Icons',
-        meta: { title: 'icons', icon: 'icon', noCache: true }
-      }
-    ]
-  },
-
-  /** When your routing table is too long, you can split it into small modules**/
-  componentsRouter,
-  chartsRouter,
-  nestedRouter,
-  tableRouter,
-
-  {
-    path: '/example',
-    component: Layout,
-    redirect: '/example/list',
-    name: 'Example',
-    meta: {
-      title: 'example',
-      icon: 'example'
-    },
-    children: [
-      {
-        path: 'create',
-        component: () => import('@/views/example/create'),
-        name: 'CreateArticle',
-        meta: { title: 'createArticle', icon: 'edit' }
-      },
-      {
-        path: 'edit/:id(\\d+)',
-        component: () => import('@/views/example/edit'),
-        name: 'EditArticle',
-        meta: { title: 'editArticle', noCache: true },
-        hidden: true
-      },
-      {
-        path: 'list',
-        component: () => import('@/views/example/list'),
-        name: 'ArticleList',
-        meta: { title: 'articleList', icon: 'list' }
-      }
-    ]
-  },
-
-  {
-    path: '/tab',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/tab/index'),
-        name: 'Tab',
-        meta: { title: 'tab', icon: 'tab' }
-      }
-    ]
-  },
-
-  {
-    path: '/error',
-    component: Layout,
-    redirect: 'noredirect',
-    name: 'ErrorPages',
-    meta: {
-      title: 'errorPages',
-      icon: '404'
-    },
-    children: [
-      {
-        path: '401',
-        component: () => import('@/views/errorPage/401'),
-        name: 'Page401',
-        meta: { title: 'page401', noCache: true }
-      },
-      {
-        path: '404',
-        component: () => import('@/views/errorPage/404'),
-        name: 'Page404',
-        meta: { title: 'page404', noCache: true }
-      }
-    ]
-  },
-
-  {
-    path: '/error-log',
-    component: Layout,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'log',
-        component: () => import('@/views/errorLog/index'),
-        name: 'ErrorLog',
-        meta: { title: 'errorLog', icon: 'bug' }
-      }
-    ]
-  },
-
-  {
-    path: '/excel',
-    component: Layout,
-    redirect: '/excel/export-excel',
-    name: 'Excel',
-    meta: {
-      title: 'excel',
-      icon: 'excel'
-    },
-    children: [
-      {
-        path: 'export-excel',
-        component: () => import('@/views/excel/exportExcel'),
-        name: 'ExportExcel',
-        meta: { title: 'exportExcel' }
-      },
-      {
-        path: 'export-selected-excel',
-        component: () => import('@/views/excel/selectExcel'),
-        name: 'SelectExcel',
-        meta: { title: 'selectExcel' }
-      },
-      {
-        path: 'upload-excel',
-        component: () => import('@/views/excel/uploadExcel'),
-        name: 'UploadExcel',
-        meta: { title: 'uploadExcel' }
-      }
-    ]
-  },
-
-  {
-    path: '/zip',
-    component: Layout,
-    redirect: '/zip/download',
-    alwaysShow: true,
-    meta: { title: 'zip', icon: 'zip' },
-    children: [
-      {
-        path: 'download',
-        component: () => import('@/views/zip/index'),
-        name: 'ExportZip',
-        meta: { title: 'exportZip' }
-      }
-    ]
-  },
-
-  {
-    path: '/pdf',
-    component: Layout,
-    redirect: '/pdf/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/pdf/index'),
-        name: 'PDF',
-        meta: { title: 'pdf', icon: 'pdf' }
-      }
-    ]
-  },
-  {
-    path: '/pdf/download',
-    component: () => import('@/views/pdf/download'),
-    hidden: true
-  },
-
-  {
-    path: '/theme',
-    component: Layout,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/theme/index'),
-        name: 'Theme',
-        meta: { title: 'theme', icon: 'theme' }
-      }
-    ]
-  },
-
-  {
-    path: '/clipboard',
-    component: Layout,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/clipboard/index'),
-        name: 'ClipboardDemo',
-        meta: { title: 'clipboardDemo', icon: 'clipboard' }
-      }
-    ]
-  },
-
-  {
-    path: '/i18n',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/i18n-demo/index'),
-        name: 'I18n',
-        meta: { title: 'i18n', icon: 'international' }
-      }
-    ]
-  },
-
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'externalLink', icon: 'link' }
-      }
-    ]
-  },
-
-  { path: '*', redirect: '/404', hidden: true }
-]
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@ -1,11 +1,15 @@
-import { asyncRouterMap, constantRouterMap } from '@/router'
+import { constantRoutes, generalRoutes } from '@/router'
+import { fetchAsyncRoutes } from '@/api/routes'

+const _import = path => () => import(`@/views/${path}`)
 /**
 * 通过meta.role判断是否与当前用户权限匹配
 * @param roles
 * @param route
 */
 function hasPermission(roles, route) {
+  // 如果是隐藏的菜单, 都是可访问的, 因为隐藏的菜单不会出现在左侧菜单栏, 不可编辑权限
+  if (route.hidden) return true
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
@ -13,50 +17,61 @@ function hasPermission(roles, route) {
  }
 }

+// 将从服务器获得的路由表转换为vue-router的路由表
+function mapAsyncRoutes(asyncRoutes) {
+  return asyncRoutes.map(route => {
+    route.component && (route.component = _import(route.component))
+    if (route.children) {
+      route.children = mapAsyncRoutes(route.children)
+    }
+    return route
+  })
+}
+
 /**
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
- * @param routes asyncRouterMap
+ * @param routes asyncRoutes
 * @param roles
 */
-function filterAsyncRouter(routes, roles) {
-  const res = []
-
-  routes.forEach(route => {
-    const tmp = { ...route }
-    if (hasPermission(roles, tmp)) {
-      if (tmp.children) {
-        tmp.children = filterAsyncRouter(tmp.children, roles)
-      }
-      res.push(tmp)
+function filterAsyncRoutes(routes, roles) {
+  return routes.filter(route => {
+    if (!hasPermission(roles, route)) {
+      return false
    }
+    if (route.children) {
+      route.children = filterAsyncRoutes(route.children, roles)
+    }
+    return true
  })
-
-  return res
 }

 const permission = {
  state: {
    routers: [],
-    addRouters: []
+    addRouters: [],
+    asyncRoutes: []
  },
  mutations: {
-    SET_ROUTERS: (state, routers) => {
-      state.addRouters = routers
-      state.routers = constantRouterMap.concat(routers)
+    SET_ROUTERS: (state, routes) => {
+      state.addRouters = routes
+      state.routers = constantRoutes.concat(routes)
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        const { roles } = data
-        let accessedRouters
-        if (roles.includes('admin')) {
-          accessedRouters = asyncRouterMap
-        } else {
-          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
-        }
-        commit('SET_ROUTERS', accessedRouters)
-        resolve()
+        let accessedRoutes
+        fetchAsyncRoutes().then(res => {
+          const asyncRoutes = res.data
+          if (roles.includes('admin')) {
+            accessedRoutes = mapAsyncRoutes(asyncRoutes).concat(generalRoutes)
+          } else {
+            accessedRoutes = mapAsyncRoutes(filterAsyncRoutes(asyncRoutes, roles)).concat(generalRoutes)
+          }
+          commit('SET_ROUTERS', accessedRoutes)
+          resolve(accessedRoutes)
+        })
      })
    }
  }
--- a/src/views/permission/role.vue
+++ b/src/views/permission/role.vue
@ -0,0 +1,243 @@
+<template>
+  <div class="app-container wrapper">
+    <el-button type="primary" @click="handleNewRole">{{ $t('permission.newRole') }}</el-button>
+
+    <el-table :data="rolesData" style="width: 100%" class="roles-table">
+      <el-table-column label="Role Id" width="220">
+        <template slot-scope="scope">{{ scope.row.id }}</template>
+      </el-table-column>
+      <el-table-column label="Role Name" width="220">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="Description">
+        <template slot-scope="scope">{{ scope.row.describe }}</template>
+      </el-table-column>
+      <el-table-column label="Operations">
+        <template slot-scope="scope">
+          <el-button type="primary" size="small" @click="handleEdit(scope)">{{ $t('permission.editPermission') }}</el-button>
+          <el-button type="danger" size="small" @click="handleDelete(scope)">{{ $t('permission.delete') }}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog :visible.sync="newRoleDialogVisible" title="New Role">
+      <el-form :model="newRole" class="new-role-form">
+        <el-form-item label="Role Name">
+          <el-input v-model="newRole.name" placeholder="role name"/>
+        </el-form-item>
+        <el-form-item label="Role Description">
+          <el-input v-model="newRole.describe" placeholder="role Description"/>
+        </el-form-item>
+      </el-form>
+
+      <el-button type="primary" @click="confirmNewRole">{{ $t('permission.confirm') }}</el-button>
+      <el-button type="danger" @click="cancleNewRole">{{ $t('permission.cancel') }}</el-button>
+    </el-dialog>
+
+    <el-dialog :visible.sync="permissionDialogVisible" :title="$t('permission.editPermission')">
+      <el-form label-width="100px">
+        <el-form-item label="Role Name">
+          <span>{{ checkedRole.data.name }}</span>
+        </el-form-item>
+        <el-form-item label="Menus">
+          <el-tree ref="tree" :check-strictly="checkStrictly" :data="MapRoutesData" :props="defaultProps" :filter-node-method="filterNode" show-checkbox node-key="id" class="permission-tree"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="confirmPermission">{{ $t('permission.confirm') }}</el-button>
+          <el-button type="danger" @click="canclePermission">{{ $t('permission.cancel') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import { deepClone } from '@/utils'
+import { generateTitle } from '@/utils/i18n'
+import { newRole, deleteRole, updateRole, fetchRoles } from '@/api/role'
+import { fetchAsyncRoutes } from '@/api/routes'
+
+export default {
+  data() {
+    return {
+      checkStrictly: false,
+      routesData: [],
+      newRoleDialogVisible: false,
+      permissionDialogVisible: false,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      newRole: {
+        id: '',
+        name: '',
+        describe: '',
+        accessibleRoutes: []
+      },
+      checkedRole: {
+        index: null,
+        data: {
+          id: '',
+          name: '',
+          describe: '',
+          accessibleRoutes: []
+        }
+      },
+      rolesData: []
+    }
+  },
+  computed: {
+    MapRoutesData() {
+      const traverseRoutes = routes => {
+        return routes.map(route => {
+          if (route.children && this.onlyOneShowingChild(route.children, route) && !route.alwaysShow) {
+            route = this.onlyOneShowingChild(route.children, route)
+          }
+          route.children && (route.children = traverseRoutes(route.children))
+          route.name = this.generateTitle((route.meta && route.meta.title) || route.name)
+          return route
+        })
+      }
+      return traverseRoutes(this.routesData)
+    }
+  },
+  created() {
+    fetchAsyncRoutes().then(res => {
+      this.routesData = res.data
+    })
+    fetchRoles().then(res => {
+      console.log(res)
+      this.rolesData = res.data
+    })
+  },
+  methods: {
+    generateTitle,
+    // filter out the hidden route menu
+    filterNode(value, data) {
+      return !data.hidden
+    },
+    // reference: src/view/layout/components/Sidebar/SidebarItem.vue
+    onlyOneShowingChild(children, parent) {
+      let onlyOneChild = null
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        onlyOneChild = showingChildren[0]
+        return onlyOneChild
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return onlyOneChild
+      }
+
+      return false
+    },
+    handleNewRole() {
+      this.newRoleDialogVisible = true
+    },
+    handleEdit(scope) {
+      this.checkedRole.index = scope.$index
+      // 修复setCheckedKeys leaf only情况下, none-leaf node不会被check的bug
+      this.checkStrictly = true
+      this.checkedRole.data = deepClone(scope.row)
+      this.permissionDialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.tree.filter()
+        this.$refs.tree.setCheckedKeys(
+          this.checkedRole.data.accessibleRoutes,
+          true
+        )
+        this.checkStrictly = false
+      })
+      // this.checkStrictly = false
+    },
+    handleDelete(scope) {
+      this.$confirm('Confirm to remove the role?', 'Warning', {
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      })
+        .then(() => {
+          return deleteRole(scope.row.id)
+        })
+        .then(res => {
+          this.rolesData.splice(scope.$index, 1)
+          this.$message({
+            type: 'success',
+            message: 'Delete succed!'
+          })
+        })
+        .catch(err => {
+          console.error(err)
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          })
+        })
+    },
+    confirmPermission() {
+      let routeIds = this.$refs.tree
+        .getCheckedNodes(false, true).reduce((result, node) => {
+          // 如果父菜单被隐藏(onlyOneShowingChild),需要把父菜单的id也添加进去
+          return result.concat(node.id, node.parentId)
+        }, [])
+      routeIds = Array.from(new Set(routeIds))
+      updateRole(this.checkedRole.data.id, {
+        ...this.rolesData[this.checkedRole.index],
+        accessibleRoutes: routeIds
+      }).then(res => {
+        this.rolesData[this.checkedRole.index].accessibleRoutes = routeIds
+        this.$message({
+          message: 'Edit succed',
+          type: 'success'
+        })
+        this.permissionDialogVisible = false
+      })
+    },
+    canclePermission() {
+      this.permissionDialogVisible = false
+    },
+    resetNewRole() {
+      this.newRole = {
+        id: '',
+        name: '',
+        describe: '',
+        accessibleRoutes: []
+      }
+    },
+    confirmNewRole() {
+      newRole(this.newRole).then(res => {
+        this.newRole.id = res.data.id
+        this.rolesData.push(deepClone(this.newRole))
+        this.resetNewRole()
+        this.newRoleDialogVisible = false
+      })
+    },
+    cancleNewRole() {
+      this.resetNewRole()
+      this.newRoleDialogVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 40px;
+  }
+  .permission-tree {
+    margin-bottom: 40px;
+  }
+}
+</style>