官網https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD

vue項目做的少，elementUI也是最近才接觸，所以文檔看了一周才有了點思路，最難的就是用戶登錄權限部分

目錄結構

頁面都在/src/views 下

登錄權限

登錄在src/views/login/index.vue ，登錄只是賬號密碼，登錄後獲取用戶信息其中包含用戶角色，路由配置在src/router/index.js，路由中配置了每個路由對應的角色

側邊欄動態渲染

src/router/index.js 路由配置裏有公共的路由constantRoutes和異步路由asyncRoutes，異步路由是根據在 meta裏設置roles來實現動態的meta: { title:

權限的判斷 是在 src/store/modules/permission.js文件裏，有個actions。判斷如果角色裏包含admin（一個用戶可多個角色，所以返回的角色是個數組），就顯示全部的，否則的話需要做判斷，還是根據 route.meta.roles.includes(role) 來判斷路由是否包含返回的角色

GenerateRoutes({ commit }, data) {
　　return new Promise(resolve => {
　　　　const { roles } 
 
= data
　　　　let accessedRoutes
　　　　if (roles.includes(‘admin‘)) {
　　　　　　accessedRoutes = asyncRoutes
　　　　} else {
　　　　　　accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
　　　　}
　　　　commit(‘SET_ROUTES‘, accessedRoutes)
　　　　resolve(accessedRoutes)
　　})
}

動態加載路由肯定要在全局做判斷，需要寫在路由跳轉之前router.beforeEach，根據目錄結構可以知道是在src/permission.js中， store.dispatch(‘GenerateRoutes‘）

 1 router.beforeEach((to, from, next) => {
 2   if (store.getters.token) { // 判斷是否有token
 3     if (to.path === ‘/login‘) {
 4       next({ path: ‘/‘ });
 5     } else {
 6       if (store.getters.roles.length === 0) { // 判斷當前用戶是否已拉取完user_info信息
 7         store.dispatch(‘GetInfo‘).then(res => { // 拉取info
 8           const roles = res.data.role;
 9           store.dispatch(‘GenerateRoutes‘, { roles }).then(() => { // 生成可訪問的路由表
10             router.addRoutes(store.getters.addRouters) // 動態添加可訪問路由表
11             next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
12           })
13         }).catch(err => {
14           console.log(err);
15         });
16       } else {
17         next() //當有用戶權限的時候，說明所有可訪問路由已生成 如訪問沒權限的全面會自動進入404頁面
18       }
19     }
20   } else {
21     if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單，直接進入
22       next();
23     } else {
24       next(‘/login‘); // 否則全部重定向到登錄頁
25     }
26   }
27 });

後臺權限配置

3月15號剛更新的後臺可以進行權限配置了，先看下界面

也就是說

vue-element-admin 使用總結