vue权限路由详解

和黑猫之家聊聊?

前言


近期,用vue框架做了个后台管理项目,涉及权限,参考网上资料,得此项目https://github.com/zhangxuexi...
不知大家是否还是各种mock工具来模拟数据,此项目,包含一个基于express,搭建的mock模拟服务,个人觉得,高大上了一点有木有!

vue权限路由详解 vue学习 第1张

启动


mock项目:

cd mocknpm installnpm start基于node.js的mock服务就启动起来了。

项目目录

vue权限路由详解 vue学习 第2张

请求接口路由都在这个routes/index.js里定义,接口返回的都是写死的json数据。如需连接数据库等操作请自行百度。这个项目不作重点介绍

myProject项目:

cd myProjectnpm installnpm run dev

两个项目分别启动起来后,可用下面账号登录:
角色1:用户名:123 密码:a123456
角色2:用户名:456 密码:a123456

router.js 权限路由
重点来了,直接上干货!

vue权限路由详解 vue学习 第3张
这部分是webpack的代码分割,模块可按需加载,也就是懒加载,具体知识可点击链接进去查看。

vue权限路由详解 vue学习 第4张

不受权限控制的通用路由可定义在这里,直接在vue实例中注入即可。

export const asyncRoutes = [
 {
   path: 'home',
   component: home,
   redirect: '/home/index',
   meta: {role: ['0', '1'], nav: false},
   children:
     [
       {
         path: '/home/index',
         name: '概览',
         component: companyIndex,
         meta: { role: ['1'], nav: true }
       },
       {
         path: '/home/index',
         name: '概览',
         component: userIndex,
         meta: { role: ['0'], nav: true }
       },
       {
         path: '/policy',
         name: '列表管理',
         component: policy,
         redirect: '/policy/list',
         meta: { role: ['0'], nav: true },
         children: [
           {
             path: 'list',
             name: '列表',
             component: userList,
             meta: { role: ['0'], nav: true }
           }
         ]},
       {
         path: '/policy',
         name: '列表管理',
         component: policy,
         redirect: '/policy/company',
         meta: { role: ['1'], nav: true },
         children: [
           {
             path: '/policy/company',
             name: '列表',
             redirect: '/policy/company/list',
             component: policy,
             meta: { role: ['1'], nav: true },
             children: [
               {
                 path: 'list',
                 name: '列表',
                 component: companyList,
                 meta: { role: ['1'], nav: false }
               },
               {
                 path: 'detail/:policyNum',
                 name: '列表详情',
                 component: detailCompany,
                 meta: { role: ['1'], nav: false }
               },
               {
                 path: 'add',
                 name: '添加',
                 component: addCompany,
                 meta: { role: ['1'], nav: false }
               }
             ]}
         ]
       }
     ]
 }]

这部分是权限路由,以每个路由记录的元信息字段,定义权限。

meta:{role:['0'], nav:true}

role:代表这条路由记录的所属角色,nav:true代表要显示在导航栏,例如一些列表路由,false:代表不显示在导航栏,例如添加,查看路由。

router.beforeEach((to, from, next) => {

代码注释写的很详细了,这里用了vuex,做状态管理,还是很方便的。
这段代码流程:刷新或第一次访问项目的时候,会请求这个接口,
vue权限路由详解 vue学习 第5张

如果接口返回正确数据,说明是已登录,继续跳转路由
如果未返回正确数据,则跳回登录路由。

接口返回正确数据后,根据权限,去筛选路由

vue权限路由详解 vue学习 第6张

vuex:permission详情

import { asyncRoutes } from '@/router/index'import { getUserInfo } from '@/common/getUser'const actions = {  userLogin: ({commit}, userData) => commit('userLogin', userData), /* 用户信息存储 */
 permission: ({commit}, role) => { /* 根据权限信息加载权限路由 */
   let routeArr = deepCopy(asyncRoutes) // 含有复杂数组对象,循环进行深拷贝
   const b = filterAsyncRouter(routeArr, role)
   commit('navList', b)
 },  getUserInfo: ({commit}) => { // 检验是否登录请求
   return getUserInfo()
 }
}// 根据权限 筛选路由function filterAsyncRouter (asyncRouterMap, roles) {  const accessedRouters = asyncRouterMap.filter(route => {    if (route.meta.role.indexOf(roles) >= 0) {      if (route.children && route.children.length) {
       route.children = filterAsyncRouter(route.children, roles)
     }      return true
   }    return false
 })  return accessedRouters
}function deepCopy (routeArr) {  return routeArr.map((arr) => {
   arr = Object.assign({}, arr)    return arr
 })
}export default actions

针对刷新时,vuex中数据丢失,这里,没有使用localstorge或者sessionstorge做缓存,主要考虑这两种缓存方式的缺点均不符合公司业务要求,localstorge:手动清除才能消失,sessionstorge:只在本标签页有效。

不如直接来个接口,让后端判断登录时效来的更安全。

好了,关于路由的就分析到这里,大家理解了吗?欢迎大家star哈

来黑猫之家看看呗

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Copyright © 2015-2019 | 黑猫吧(www.heimaoba.cn) | 赣ICP备18005425号-1 |