关于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 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
javascript 继承实现方法
Aug 26 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP学习 运算符与运算符优先级
2008/06/15 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
详解vue-cli3使用
2018/08/14 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
js实现日历
2020/11/07 Javascript
Python sys.path详细介绍
2013/10/17 Python
TensorFlow实现Logistic回归
2018/09/07 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
应聘美工求职信
2013/11/07 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
产品质量保证书
2014/04/29 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
校运动会广播稿300字
2014/10/07 职场文书
早上好问候语大全
2015/11/10 职场文书
python实现高效的遗传算法
2021/04/07 Python