官網https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BDvue
vue項目作的少，elementUI也是最近才接觸，因此文檔看了一週纔有了點思路，最難的就是用戶登陸權限部分git
目錄結構
頁面都在/src/views 下github
登陸權限
登陸在src/views/login/index.vue ，登陸只是帳號密碼，登陸後獲取用戶信息其中包含用戶角色，路由配置在src/router/index.js，路由中配置了每一個路由對應的角色vuex
側邊欄動態渲染
src/router/index.js 路由配置裏有公共的路由constantRoutes和異步路由asyncRoutes，異步路由是根據在 meta裏設置roles來實現動態的meta: { title: 'permission', icon: 'lock', roles: ['admin', 'editor']}，數組
權限的判斷 是在 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'） 經過調用vuex中的方法得到路由權限，沒有權限的話就跳401async
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號剛更新的後臺能夠進行權限配置了，先看下界面ide
也就是說權限路由能夠動態的設置了，不用每一個角色都去路由下邊配置了（異步路由asyncRoutes），可是改爲這樣的話，路由就須要每次登陸後動態從接口獲取，返回的格式是用戶的角色對應角色下邊的路由，而咱們的router文件裏的異步路由對應角色，因此獲取到的數據須要與現有的路由列表作一下匹配ui
返回的數據：spa
1 { 2 key: 'intern', 3 name: 'intern', 4 description: '亂入者', 5 routes: [ 6 { 7 path: '', 8 redirect: 'dashboard', 9 children: [ 10 { 11 path: 'dashboard', 12 name: 'Dashboard', 13 meta: { title: '首頁', icon: 'dashboard', noCache: true, affix: true } 14 } 15 ] 16 }, 17 { 18 path: '/permission', 19 redirect: '/permission/index', 20 alwaysShow: true, // will always show the root menu 21 meta: { 22 title: '權限管理', 23 icon: 'lock', 24 }, 25 children: [ 26 { 27 path: 'user', 28 name: 'UserPermission', 29 meta: { 30 title: '用戶管理', 31 } 32 }, 33 ] 34 }, 35 ] 36 }
對數據進行處理，與現有的路由asyncRoutes匹配
function getAsyncRoutes(userRoute, localRoute, role) { let asyncRoute = localRoute.filter(item => item.path == userRoute.path); if (asyncRoute.length > 0) { asyncRoute[0].meta.roles.push(role); if (userRoute.children) { userRoute.children.forEach(item => { getAsyncRoutes(item, asyncRoute[0].children, role) }) } } } rolesData.forEach(userData => { userData.routes.forEach(userRoute => { getAsyncRoutes(userRoute, asyncRoutes, userData.key); }) })
總結：在每一個異步路由上角色都寫上admin，登陸後獲取每一個用戶對應的路由，與現有寫死的路由進行匹配，將角色添加到異步路由中
後臺動態路由權限設置
用戶登陸以後會跳轉路由，跳轉路由的時候全局權限裏邊作了用戶信息的判斷，沒有用戶信息的狀況下會先獲取用戶信息。
獲取到用戶信息會返回用戶的角色及角色對應的路由，在xuex中，會先把角色對應的路由添加到路由上，而後再根據角色去匹配路由，
返回的就是該用戶的路由了（一個用戶可對應多個角色）