关于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 相关文章推荐
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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
php实现微信分享朋友链接功能
2019/02/18 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
js实现表格字段排序
2014/02/19 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python获取list下标及其值的简单方法
2016/09/12 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
python获取代理IP的实例分享
2018/05/07 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
详解python中index()、find()方法
2019/08/29 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
软件工程专业推荐信
2013/10/28 职场文书
财务副总经理工作职责
2013/11/25 职场文书
2014年接待工作总结
2014/11/26 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
python3实现常见的排序算法(示例代码)
2021/07/04 Python
java代码实现空间切割
2022/01/18 Java/Android