关于vue.js: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

咱们先找到 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

代码入口: 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-router
Vue 中 Axios 的封装和 API 接口的治理
10 个实用技巧让你的 Vue 代码更优雅

最初，欢送关注公众号：前端开发博客，回复 1024，支付前端进阶材料

关于vue.js:Vue路由权限控制分析

前言

我的项目总体目录构造

路由权限管制逻辑

路由解决流程图

路由解决源码剖析

动静路由配置

动静增加路由逻辑图

动静路由源码剖析

扩大 - 按钮权限

总结

相干文章

Just My Socks（注册教程内含优惠码）

关于vue.js:Vue路由权限控制分析

前言

我的项目总体目录构造

路由权限管制逻辑

路由解决流程图

路由解决源码剖析

动静路由配置

动静增加路由逻辑图

动静路由源码剖析

扩大 - 按钮权限

总结

相干文章

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）