Vue路由权限控制分析

前端开发博客 2020-11-09 22:19:26
分析 vue 路由 权限 控制


本文已获作者授权转载

作者:卑微前端
原文:https://juejin.im/post/689229...

前言

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

项目总体目录结构

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

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

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

路由权限控制逻辑

路由处理流程图

路由2.png

路由 2.png

路由处理源码分析

我们先找到 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 合并生成最新的路由。

动态添加路由逻辑图

动态路由生成.png

动态路由生成.png

动态路由源码分析

代码入口: 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 对应的页面

相关文章

  1. 手写简易版vue-router
  2. Vue 中 Axios 的封装和 API 接口的管理
  3. 10个实用技巧让你的 Vue 代码更优雅

最后,欢迎关注公众号:前端开发博客,回复 1024,领取前端进阶资料

版权声明
本文为[前端开发博客]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037765057

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple