关于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 相关文章推荐
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
JavaScript实现随机点名器实例详解
May 07 Javascript
js实现简单进度条效果
Mar 25 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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实现加减法验证码代码
2014/02/14 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python二元表达式用法
2019/12/04 Python
Python networkx包的实现
2020/02/14 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
python tqdm库的使用
2020/11/30 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
面试自我介绍演讲稿
2014/04/29 职场文书
党委班子对照检查材料
2014/08/19 职场文书
员工年终自我评价
2014/09/14 职场文书
化工见习报告范文
2014/10/31 职场文书
罚站检讨书
2015/01/29 职场文书
英文版辞职信
2015/02/28 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server