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 相关文章推荐
学习jquery之一
Apr 27 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python的面向对象编程方式学习笔记
2016/07/12 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
劳动实践课感言
2014/02/01 职场文书
新春寄语大全
2014/04/09 职场文书
机房搬迁方案
2014/05/01 职场文书
服务标语口号
2014/07/01 职场文书
教师节倡议书
2014/08/30 职场文书
公务员个人年终总结
2015/02/12 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle