关于Vue的路由权限管理的示例代码


Posted in Javascript onMarch 06, 2018

前言

曾经在工作上对 vue 路由权限管理这方面有过研究,这几天又看到了几篇相关的文章,再加上昨天电面中又再一次提及到,就索性整理了一下自己的一些看法,希望对大家有帮助。

实现

大体上实现的思路很简单,先上图:

关于Vue的路由权限管理的示例代码

无非是将路由配置按用户类型分割为 用户路由 和 基本路由,不同的用户类型可能存在不同的 用户路由,具体依赖实际业务。

  1. 用户路由: 当前用户所特有的路由
  2. 基本路由:所有用户均可以访问的路由

实现控制的方式分两种:

通过vue-router addRoutes 方法注入路由实现控制
通过vue-router beforeEach 钩子限制路由跳转

addRoutes 方式:

通过请求服务端获取当前用户路由配置,编码为 vue-router 所支持的基本格式(具体如何编码取决于前后端协商好的数据格式),通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去,以实现用户路由。

beforeEach 方式

通过请求服务端获取当前用户路由配置,通过注册 router.beforeEach 钩子对路由的每次跳转进行管理,每次跳转都进行检查,如果目标路由不存再于 基本路由 和 当前用户的 用户路由 中,取消跳转,转为跳转错误页。

以上两种方式均需要在 vue-router 中配置错误页,以保证用户感知权限不足。

两种方式的原理其实都是一样的,只不过 addRoutes 方式 通过注入路由配置告诉 vue-router :“当前我们就只有这些路由,其它路由地址我们一概不认”,而 beforeEach 则更多的是依赖我们手动去帮 vue-router 辨别什么页面可以去,什么页面不可以去。说白了也就是 自动 与 手动 的差别。说到这,估计大家都会觉得既然是 自动 的,那肯定是 addRoutes 最方便快捷了,还能简化业务代码,笔者一开始也是这么认为的,但是!很多人都忽略了一点:

关于Vue的路由权限管理的示例代码

addRoutes 方法仅仅是帮你注入新的路由,并没有帮你剔除其它路由!

设想存在这么一种情况:用户在自己电脑上登录了管理员账号,这个时候会向路由中注入管理员的路由,然后再退出登录,保持页面不刷新,改用普通用户账号进行登录,这个时候又会向路由中注入普通用户的路由,那么,在路由中将存在两种用户类型的路由,即使用户不感知,通过改变 url,普通用户也可以访问管理员的页面!

对于这个问题,也有一个解决办法:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const createRouter = () => new Router({
 mode: 'history',
 routes: []
})
const router = createRouter()
export function resetRouter () {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher
}
export default router

通过新建一个全新的 Router,然后将新的 Router.matcher 赋给当前页面的管理 Router,以达到更新路由配置的目的。

笔者做了一个小demo,大家可以去体验一下。

关于上述问题,在vue-router 的 github issues 下有过讨论,分别是:

Add option to Reset/Delete Routes #1436

Feature request: replace routes dynamically #1234

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
javascript实现获取字符串hash值
May 10 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
js操作数组函数实例小结
Dec 10 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
如何更好的编写js async函数
May 13 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 #Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 #Javascript
解决vue build打包之后首页白屏的问题
Mar 06 #Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 #Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 #Javascript
解决vue打包项目后刷新404的问题
Mar 06 #Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 #Javascript
You might like
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
php计算整个目录大小的方法
2015/06/19 PHP
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
用C语言实现文件读写操作
2013/10/27 面试题
写一个方法1000的阶乘
2012/11/21 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
一年级学生评语大全
2014/04/21 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers