关于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 高级语法介绍
Jun 15 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
JS实现普通轮播图特效
Jan 01 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 file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
AJAX的全称是什么
2012/11/06 面试题
会计学个人自荐信模板
2013/12/13 职场文书
商场促销活动总结
2014/07/10 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
新闻稿标题
2015/07/18 职场文书
小学运动会入场词
2015/07/18 职场文书