vue-element-admin 使用总结

官网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: '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中的方法获得路由权限,没有权限的话就跳401

 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号刚更新的后台可以进行权限配置了,先看下界面

也就是说权限路由可以动态的设置了,不用每个角色都去路由下边配置了(异步路由asyncRoutes),但是改成这样的话,路由就需要每次登录后动态从接口获取,返回的格式是用户的角色对应角色下边的路由,而我们的router文件里的异步路由对应角色,所以获取到的数据需要与现有的路由列表做一下匹配

返回的数据:

 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匹配


/**
* 递归过滤异步路由表,返回符合用户角色权限的路由表
* @param userRoute 动态获取的用户路由 对象
* @param localRoute 本地的路由 数组
* @param role 路由要添加的角色 字符串
*/
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中,会先把角色对应的路由添加到路由上,然后再根据角色去匹配路由,

返回的就是该用户的路由了(一个用户可对应多个角色)

posted @ 2019-03-28 18:19  苦行僧ren  阅读(48472)  评论(0编辑  收藏  举报