Vue路由权限控制解析


Posted in Javascript onNovember 09, 2020

前言

本人在公司主要负责中后台系统的开发,其中路由和权限校验算是非常重要且最为基本的一环。实际开发项目中,关于登录和路由权限的控制参照了vue-element-admin这个明星项目,并在此基础上基于业务进行了整合,接下来我会以这个项目为例,仔细地剖析整个路由和权限校验的过程,也算是对这个知识点的一些总结。

项目总体目录结构

进入今天主题之前,我们先来梳理下整个项目,src目录下的。

  • api: 接口请求
  • assets: 静态资源
  • components: 通用组件
  • directive: 自定义指令
  • filters: 自定义过滤器
  • icons: 图标
  • layout: 布局组件(页面架构核心)
  • router: 路由配置(路由权限核心模块)
  • store: 状态管理
  • styles: 样式文件
  • utils: 工具方法
  • views: 页面组件
  • permission.js 权限管理

对这项目感兴趣的同学可以自行,有针对性地学习,除了路由权限校验的功能以外,也包含了很多有意思的功能,相信能够学到不少东西。

路由权限控制逻辑

路由处理流程图

Vue路由权限控制解析

路由处理源码分析

我们先找到permission.js文件,此处定义全局路由守卫,也是路由权限中非常关键的核心代码。为方便大家阅读,只摘取了跟路由相关的代码

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/auth-redirect'] // 白名单配置

router.beforeEach(async(to, from, next) => {
 // start progress bar
 NProgress.start()
 // 有token
 if (hasToken) {
 if (to.path === '/login') 
  // 如果当前路径为/login,重定向到首页
  next({ path: '/' })
  NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
 } else {
  // determine whether the user has obtained his permission roles through getInfo
  const hasRoles = store.getters.roles && store.getters.roles.length > 0
  if (hasRoles) {
   next()
  } else {
  try {
   // 获取用户信息
   const { roles } = await store.dispatch('user/getInfo')
   // 根据用户的角色,动态生成路由
   const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
   // 动态添加路由 (将基本的路由信息跟动态路由进行合并)
   router.addRoutes(accessRoutes)
   // 继续访问
   next({ ...to, replace: true })
  } catch (error) {
   // 删除token
   await store.dispatch('user/resetToken')
   Message.error(error || 'Has Error')
   // 重定向到登录页面
   next(`/login?redirect=${to.path}`)
   NProgress.done()
  }
  }
 }
 } else {
 // 没有token
 if (whiteList.indexOf(to.path) !== -1) {
  // 如果在白名单中,则不需要进行任何校验,直接放行
  next()
 } else {
  // 如果不存在于白名单中,则重定向到登录页面.
  next(`/login?redirect=${to.path}`)
  NProgress.done()
 }
 }
})

router.afterEach(() => {
 // finish progress bar
 NProgress.done()
})

注意到,代码中的/login?redirect=${jto.path}, 这里的redirect参数主要是用于,在用户登录成功后进行跳转的页面路径。具体功能在/views/login/index.vue文件下

watch: {
 $route: {
 handler: function(route) {
  const query = route.query
  if (query) { //路由查询参数
  this.redirect = query.redirect
  this.otherQuery = this.getOtherQuery(query)
  }
 },
 immediate: true
 }
},
// methods下的:
handleLogin() { // 登录函数
 this.$refs.loginForm.validate(valid => {
 if (valid) { // 账号密码校验成功后
  this.$store.dispatch('user/login', this.loginForm)
  .then(() => {
   // 直接跳转到this.redirect 路径的页面
   this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
   this.loading = false
  })
 } else {
  // ..
 }
 })
},

动态路由配置

我们先来看看路由的定义,在/src/router/index.js文件下

export const constantRoutes = [ // 用来定义普通的路由配置,不需要访问权限的
 // 路由配置对象
]
export const asyncRoutes = [ // 通过路由元信息meta.roles来设置访问权限,一般来说是个数组
 {
 path: '/permission',
 component: Layout,
 redirect: '/permission/page',
 alwaysShow: true, // will always show the root menu
 name: 'Permission',
 meta: {
  title: 'Permission',
  icon: 'lock',
  roles: ['admin', 'editor'] // 通过roles设置路由的权限
 },
 // ...
 }
]

动态添加路由时,本质上就是根据用户的角色信息在asyncRoutes路由配置数组中进行路由筛选,找到相对应的路由,与constantRoutes合并生成最新的路由。

动态添加路由逻辑图

Vue路由权限控制解析

动态路由源码分析
代码入口: permission.js

const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

permission/generateRoutes方法入口文件:/strore/modules/permissions.js

import { asyncRoutes, constantRoutes } from '@/router'
const state = {
 routes: [],
 addRoutes: []
}

const mutations = {
 SET_ROUTES: (state, routes) => {
 state.addRoutes = routes
 state.routes = constantRoutes.concat(routes)
 }
}

const actions = {
 generateRoutes({ commit }, roles) {
 return new Promise(resolve => {
  let accessedRoutes
  if (roles.includes('admin')) {
  // 如果包含了admin,则说明是admin,具有所有模块的访问权限
  accessedRoutes = asyncRoutes || [] 
  } else {
  // 如果不是管理员,则需要根据用户角色roles和异步路由进行筛选
  accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
  }
  // 将最终的结果存放到vuex中
  commit('SET_ROUTES', accessedRoutes)
  // resolve出去
  resolve(accessedRoutes)
 })
 }
}

对异步路由进行筛选,并将最终的结果存放到vuex中,并将结果resolve出去

export function hasPermission(roles, route) {
 if (route.meta && route.meta.roles) { // 如果存在meta.roles
 // 只要meta.roles中存在与用户角色列表中相同的值,则说明具有访问权限
 return roles.some(role => route.meta.roles.includes(role))
 } else {
 // 不存在meta或者是不存在meta.roles,则说明是通用模块,直接放行
 return true
 }
}

export function filterAsyncRoutes(routes, roles) {
 const res = []

 routes.forEach(route => {
 const tmp = { ...route }
 if (hasPermission(roles, tmp)) { // 相对路由数组的每一项进行访问权限的判断
  if (tmp.children) {
  // 如果存在children,则递归调用筛选函数
  tmp.children = filterAsyncRoutes(tmp.children, roles)
  }
  // 将处理好的路由配置放入到res中
  res.push(tmp)
 }
 })
 return res
}

最后回到/permission.js文件中

const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 这里的accessRoutes就是筛选之后的路由,
// 最后通过route.addRoutes将constRoutes和accessRoutes进行合并,生成最终的访问路由
router.addRoutes(accessRoutes)

扩展-按钮权限

路由权限控制基本流程已经分析完,接下来我们也来看看项目里的按钮权限控制的实现,实现也比较简单。

基本用法
<div v-permission="['admin','editor']"></div>
import store from '@/store'

function checkPermission(el, binding) {
 const { value } = binding
 // 从store中拿到我们访问接口后,取到用户角色信息
 const roles = store.getters && store.getters.roles

 if (value && value instanceof Array) { // 判断传入的值是不是数组,规范化传值
 if (value.length > 0) {
  const permissionRoles = value
  // 只要传入的permissionRoles中,包含了roles其中的一个值即可,则代表有权限
  const hasPermission = roles.some(role => {
  return permissionRoles.includes(role)
  })
  // 没有权限则进行删除,不展示。
  // v-permission具体实现可以根据业务场景进行修改
  if (!hasPermission) {
  el.parentNode && el.parentNode.removeChild(el)
  }
 }
 } else {
 throw new Error(`need roles! Like v-permission="['admin','editor']"`)
 }
}

export default {
 inserted(el, binding) {
 checkPermission(el, binding)
 },
 update(el, binding) {
 checkPermission(el, binding)
 }
}

总结

存在token

       存在用户角色信息,则说明该用户的最终可访问的路由已经生成,可以直接放行

       不存在用户信息

              1.调用获取用户信息接口,获取到用户信息, 将用户信息存放到vuex中

              2.判断用户角色

  • 如果是管理员则对所有模块具有访问权限
  • 非管理员,需要对异步路由进行筛选,通过遍历异步路由,并通过meta.roles与用户信息比较,判断用户是否具有访问权限

              3.将最终的可访问路由存放到vuex中,最后通过router.addRoutes,整合最后的路由配置列表

不存在token

       如果访问路由在白名单下,则直接进行访问

       访问路由不存在白名单下,则重定向到登录页面 path: /login?redirect=/xxx,登录成功后则跳转到/xxx对应的页面

以上就是Vue路由权限控制解析的详细内容,更多关于Vue路由权限控制的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
javascript日期计算实例分析
Jun 29 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
angularJS开发注意事项
May 26 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 #Javascript
vue 中的动态传参和query传参操作
Nov 09 #Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 #Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 #Javascript
原生JavaScript实现五子棋游戏
Nov 09 #Javascript
Nuxt的动态路由和参数校验操作
Nov 09 #Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
You might like
实用函数10
2007/11/08 PHP
五个PHP程序员工具
2008/05/26 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
sails框架的学习指南
2014/12/22 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
python列表去重的二种方法
2014/02/14 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
Python 防止死锁的方法
2020/07/29 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
董事长秘书岗位职责
2013/11/29 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
先进个人事迹材料
2014/01/25 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
师德师风演讲稿
2014/05/05 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
五年级学生期末评语
2014/12/26 职场文书
经济纠纷起诉状
2015/05/20 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL