Vue-Element-Template添加路由权限控制

1. 将Vue-Element-Admin中的src/store/modules/permission.js复制到对应位置。

2. 在src/store/getters.js 中添加permission_routes: state => state.permission.routes, 添加后会是下面这样：

const getters = {
    sidebar: state => state.app.sidebar,
    device: state => state.app.device,
    token: state => state.user.token,
    avatar: state => state.user.avatar,
    name: state => state.user.name,
    permission_routes: state => state.permission.routes
}
export default getters

3. 在src/store/index.js 中引入permission.js，修改后会是下面这样：

   import Vue from 'vue'
   import Vuex from 'vuex'
   import getters from './getters'
   import app from './modules/app'
   import settings from './modules/settings'
   import user from './modules/user'
   import permission from './modules/permission' // 这里是新加的
   
   Vue.use(Vuex)
   
   const store = new Vuex.Store({
     modules: {
       app,
       settings,
       user,
       permission // 这里是新加的
     },
     getters
   })
   
   export default store
   

4. 在src/router/index.js中添加asyncRoutes列表，文件中原有的constantRoutes中的路由不受权限管理，需要验证权限的放在asyncRoutes中：

   // 需要将原来constantRoutes中的`{ path: '*', redirect: '/404', hidden: true }`注释掉。
   export const asyncRoutes = [
     {
       path: '/test',
       component: Layout,
       meta: { title: 'Test', icon: 'tree' },
       children: [
         {
           path: 'test1',
           name: 'test1',
           component: () => import('@/views/tree/index'),
           meta: { title: 'test1', icon: 'tree', roles: ['admin'] }
         },
         {
           path: 'test2',
           name: 'test2',
           component: () => import('@/views/tree/index'),
           meta: { title: 'test2', icon: 'tree', roles: ['editor'] }
         }
       ]
     },
   
     // 404 page must be placed at the end !!!
     { path: '*', redirect: '/404', hidden: true }
   ]
   

   注意：admin不会受roles的限制，可以在文件src/store/modules/permission.js中的actions修改：

   const actions = {
     generateRoutes({ commit }, roles) {
       return new Promise(resolve => {
         let accessedRoutes
         // if (roles.includes('admin')) {
         //   accessedRoutes = asyncRoutes || []
         // } else {
           accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
         // }
         commit('SET_ROUTES', accessedRoutes)
         resolve(accessedRoutes)
       })
     }
   }
   

5. 修改src\layout\components\Sidebar\index.vue使asyncRoutes中的路由菜单也显示出来：

   // 将下面这段中的“route in routes”修改为“route in permission_routes”
   <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
   
   
   // mapGetters中添加“permission_routes”
   ...mapGetters([
       'permission_routes',
       'sidebar'
   ]),
   
   // 原来的routes可以注释掉，或者删除
   // routes() {
   //   return this.$router.options.routes
   // },
   

6. 修改src\permission.js文件：
   将第34行的

   // get user info
   await store.dispatch('user/getInfo')
   
   next()
   

   修改为

   // get user info
   // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
   const { roles } = await store.dispatch('user/getInfo')
   
   // generate accessible routes map based on roles
   const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
   
   // dynamically add accessible routes
   router.addRoutes(accessRoutes)
   
   // hack method to ensure that addRoutes is complete
   // set the replace: true, so the navigation will not leave a history record
   next({ ...to, replace: true })
   

7. 登录admin进行验证
   

8. 登录editor用户验证
   

附上修改好的源码：点击这里