关于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在一段文字中的光标处插入其他文字
Aug 26 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
jquery图形密码实现方法
Mar 11 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
js事件触发操作实例分析
Jun 21 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
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 代码实现URL重写
2011/05/04 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
Vue实现日历小插件
2019/06/26 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
迎接领导欢迎词
2014/01/11 职场文书
工作失误检讨书范文
2015/01/26 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
详解CSS3浏览器兼容
2022/12/24 HTML / CSS