官网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中，会先把角色对应的路由添加到路由上，而后再根据角色去匹配路由，
返回的就是该用户的路由了（一个用户可对应多个角色）