权限管理

src/layout/components/Sidebar/index.vue

@@ -31,7 +31,8 @@ export default {
       'sidebar'
     ]),
     routes() {
-      return this.$router.options.routes
+      //return this.$router.options.routes
+      return this.$router.options.routes.concat(global.antRouter)
     },
     activeMenu() {
       const route = this.$route

src/main.js

@@ -15,6 +15,9 @@ import router from './router'
 import '@/icons' // icon
 import '@/permission' // permission control
 
+//新增
+import hasBtnPermission from '@/utils/btn-permission'
+Vue.prototype.$hasBP = hasBtnPermission
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/permission.js

@@ -1,25 +1,22 @@
 import router from './router'
 import store from './store'
+import { getToken } from '@/utils/auth'
 import { Message } from 'element-ui'
-import NProgress from 'nprogress' // progress bar
+import NProgress from 'nprogress' // 水平进度条提示: 在跳转路由时使用
-import 'nprogress/nprogress.css' // progress bar style
+import 'nprogress/nprogress.css' // 水平进度条样式
-import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title' // 获取应用头部标题的函数
-import getPageTitle from '@/utils/get-page-title'
+import Layout from '@/layout'
+import ParentView from '@/components/ParentView'
+const _import = require('./router/_import_'+process.env.NODE_ENV) // 获取组件的方法
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
-
 const whiteList = ['/login'] // no redirect whitelist
-
 router.beforeEach(async(to, from, next) => {
-  // start progress bar
   NProgress.start()
-
 // set page title
   document.title = getPageTitle(to.meta.title)
-
 // determine whether the user has logged in
   const hasToken = getToken()
-
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
@@ -32,11 +29,25 @@ router.beforeEach(async(to, from, next) => {
       } else {
         try {
           // get user info
-          await store.dispatch('user/getInfo')
+          await store.dispatch('user/getInfo')// 请求获取用户信息
-
+          if (store.getters.menus.length < 1) {
+            global.antRouter = []
             next()
+          }
+          const menus = filterAsyncRouter(store.getters.menus)// 1.过滤路由
+          console.log(menus)
+          router.addRoutes(menus) // 2.动态添加路由
+          let lastRou = [{ path: '*', redirect: '/404', hidden: true }]
+          router.addRoutes(lastRou)
+          global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
+          next({
+            ...to,
+            replace: true
+          })
+          //next()
         } catch (error) {
           // remove token and go to login page to re-login
+          console.log(error)
           await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
           next(`/login?redirect=${to.path}`)
@@ -44,9 +55,7 @@ router.beforeEach(async(to, from, next) => {
         }
       }
     }
-  } else {
+  } else { /* has no token*/
-    /* has no token*/
-
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
       next()
@@ -58,7 +67,32 @@ router.beforeEach(async(to, from, next) => {
   }
 })
 
-router.afterEach(() => {
+router.afterEach(() => { // finish progress bar
-  // finish progress bar
   NProgress.done()
+}) // // 遍历后台传来的路由字符串，转换为组件对象
+function filterAsyncRouter(asyncRouterMap) {
+  const accessedRouters = asyncRouterMap.filter(route => {
+    if (route.component) {
+      if (route.component === 'Layout') {
+        route.component = Layout
+      } else if (route.component === 'ParentView') {
+        route.component = ParentView
+      } else {
+        try {
+          route.component = _import(route.component)// 导入组件
+        } catch (error) {
+          debugger
+          console.log(error)
+          route.component = _import('dashboard/index')// 导入组件
+        }
+      }
+    }
+    if (route.children && route.children.length > 0) {
+      route.children = filterAsyncRouter(route.children)
+    } else {
+      delete route.children
+    }
+    return true
   })
+  return accessedRouters
+}

src/router/index.js

@@ -37,11 +37,11 @@ export const constantRoutes = [
     hidden: true
   },
 
-  {
+  // {
-    path: '/404',
+  //   path: '/404',
-    component: () => import('@/views/404'),
+  //   component: () => import('@/views/404'),
-    hidden: true
+  //   hidden: true
-  },
+  // },
 
   {
     path: '/',
@@ -53,162 +53,61 @@ export const constantRoutes = [
       component: () => import('@/views/dashboard/index'),
       meta: { title: 'Dashboard', icon: 'dashboard' }
     }]
-  },
+  }
 
-  {
-    path: '/system',
-    component: Layout,
-    meta: {
-      title: '系统管理',
-      icon: 'el-icon-s-tools'
-    },
-    alwaysShow: true,
-    children: [
-      {
-        name: 'sysUser',
-        path: 'sysUser',
-        component: () => import('@/views/system/sysUser/list'),
-        meta: {
-          title: '用户管理',
-          icon: 'el-icon-s-custom'
-        },
-      },
-      {
-        path: 'sysRole',
-        component: () => import('@/views/system/sysRole/list'),
-        meta: {
-          title: '角色管理',
-          icon: 'el-icon-s-help'
-        },
-      },
-      {
-        name: 'sysMenu',
-        path: 'sysMenu',
-        component: () => import('@/views/system/sysMenu/list'),
-        meta: {
-          title: '菜单管理',
-          icon: 'el-icon-s-unfold'
-        },
-      },
-      {
-        path: 'assignAuth',
-        component: () => import('@/views/system/sysRole/assignAuth'),
-        meta: {
-          activeMenu: '/system/sysRole',
-          title: '角色授权'
-        },
-        hidden: true,
-      }
-    ]
-  },
 
-  {
+  //添加我们的路由
-    path: '/example',
+  // {
-    component: Layout,
+  //   path: '/system',
-    redirect: '/example/table',
+  //   component: Layout,
-    name: 'Example',
+  //   meta: {
-    meta: { title: 'Example', icon: 'el-icon-s-help' },
+  //     title: '系统管理',
-    children: [
+  //     icon: 'el-icon-s-tools'
-      {
+  //   },
-        path: 'table',
+  //   alwaysShow: true,
-        name: 'Table',
+  //   children: [
-        component: () => import('@/views/table/index'),
+  //     {
-        meta: { title: 'Table', icon: 'table' }
+  //       path: 'sysRole',
-      },
+  //       component: () => import('@/views/system/sysRole/list'),
-      {
+  //       meta: {
-        path: 'tree',
+  //         title: '角色管理',
-        name: 'Tree',
+  //         icon: 'el-icon-s-help'
-        component: () => import('@/views/tree/index'),
+  //       },
-        meta: { title: 'Tree', icon: 'tree' }
+  //     },
-      }
+  //     {
-    ]
+  //       path: 'sysUser',
-  },
+  //       component: () => import('@/views/system/sysUser/list'),
+  //       meta: {
+  //         title: '用户管理',
+  //         icon: 'el-icon-s-help'
+  //       },
+  //     },
 
-  {
+  //     {
-    path: '/form',
+  //       name: 'sysMenu',
-    component: Layout,
+  //       path: 'sysMenu',
-    children: [
+  //       component: () => import('@/views/system/sysMenu/list'),
-      {
+  //       meta: {
-        path: 'index',
+  //         title: '菜单管理',
-        name: 'Form',
+  //         icon: 'el-icon-s-unfold'
-        component: () => import('@/views/form/index'),
+  //       },
-        meta: { title: 'Form', icon: 'form' }
+  //     },
-      }
-    ]
-  },
 
-  {
+  //     {
-    path: '/nested',
+  //       path: 'assignAuth',
-    component: Layout,
+  //       component: () => import('@/views/system/sysRole/assignAuth'),
-    redirect: '/nested/menu1',
+  //       meta: {
-    name: 'Nested',
+  //         activeMenu: '/system/sysRole',
-    meta: {
+  //         title: '角色授权'
-      title: 'Nested',
+  //       },
-      icon: 'nested'
+  //       hidden: true,
-    },
+  //     }
-    children: [
+  //   ]
-      {
+  // },
-        path: 'menu1',
-        component: () => import('@/views/nested/menu1/index'), // Parent router-view
-        name: 'Menu1',
-        meta: { title: 'Menu1' },
-        children: [
-          {
-            path: 'menu1-1',
-            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'Menu1-1',
-            meta: { title: 'Menu1-1' }
-          },
-          {
-            path: 'menu1-2',
-            component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'Menu1-2',
-            meta: { title: 'Menu1-2' },
-            children: [
-              {
-                path: 'menu1-2-1',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'Menu1-2-1',
-                meta: { title: 'Menu1-2-1' }
-              },
-              {
-                path: 'menu1-2-2',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'Menu1-2-2',
-                meta: { title: 'Menu1-2-2' }
-              }
-            ]
-          },
-          {
-            path: 'menu1-3',
-            component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'Menu1-3',
-            meta: { title: 'Menu1-3' }
-          }
-        ]
-      },
-      {
-        path: 'menu2',
-        component: () => import('@/views/nested/menu2/index'),
-        name: 'Menu2',
-        meta: { title: 'menu2' }
-      }
-    ]
-  },
 
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
-        meta: { title: 'External Link', icon: 'link' }
-      }
-    ]
-  },
 
   // 404 page must be placed at the end !!!
-  { path: '*', redirect: '/404', hidden: true }
+  // { path: '*', redirect: '/404', hidden: true }
 ]
 
 const createRouter = () => new Router({

src/store/getters.js

@@ -3,6 +3,10 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name
+  name: state => state.user.name,
+
+  //新增
+  buttons: state => state.user.buttons,
+  menus: state => state.user.menus
 }
 export default getters

src/store/modules/user.js

@@ -6,7 +6,10 @@ const getDefaultState = () => {
   return {
     token: getToken(),
     name: '',
-    avatar: ''
+    avatar: '',
+
+    buttons: [], // 新增
+    menus: '' //新增
   }
 }
 
@@ -24,6 +27,14 @@ const mutations = {
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
+  },
+  // 新增
+  SET_BUTTONS: (state, buttons) => {
+    state.buttons = buttons
+  },
+  // 新增
+  SET_MENUS: (state, menus) => {
+    state.menus = menus
   }
 }
 
@@ -46,7 +57,7 @@ const actions = {
 // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
+      getInfo().then(response => {
         const { data } = response
 
         if (!data) {
@@ -57,6 +68,9 @@ const actions = {
 
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
+
+        commit("SET_BUTTONS", data.buttons)
+        commit("SET_MENUS", data.routers)
         resolve(data)
       }).catch(error => {
         reject(error)

src/views/login/index.vue

@@ -59,7 +59,7 @@ export default {
   name: 'Login',
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
+      if (value.length<4) {
         callback(new Error('Please enter the correct user name'))
       } else {
         callback()

src/views/system/sysRole/list.vue

@@ -26,7 +26,7 @@
           <el-button icon="el-icon-refresh" size="mini" @click="resetData"
             >重置</el-button
           >
-          <el-button type="success" icon="el-icon-plus" size="mini" @click="add"
+          <el-button type="success" icon="el-icon-plus" size="mini" @click="add" :disabled="$hasBP('bnt.sysRole.add')  === false"
             >添 加</el-button
           >
           <el-button class="btn-add" size="mini" @click="batchRemove()"