使用VueRouter的addRoutes方法实现动态添加用户的权限路由


Posted in Javascript onJune 03, 2019

最近做vue 单页项目涉及到多角色用户权限问题,不同的角色用户拥有不同的功能权限, 不同的功能权限对应的不同的页面

git: https://github.com/pch1024/dynamicRouter

举个例子:
  角色A =>功能1
     =>功能2
     =>功能3
     
  角色B =>功能1
     =>功能4
     =>功能5

第1步 定义默认路由和动态路由

//动态路由(所有角色的都在这里,我们都做好组件页面了所以我们一定有这个,防君子不防小人)
export const dynamicRouter = [
  { path: '/b', name: 'b', component: pageB },
  { path: '/c', name: 'c', component: pageC },
];

//默认路由(无需登录就可以使用)
const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: pageLogin},
  { path: '/404', component: page404},
  { path: '*', redirect: '/404' },
];

const router = new VueRouter({
  mode: 'history',
  routes, // (缩写) 相当于 routes: routes
});

第2步 登录获取权限规则

当然,登录还要获取token、用户信息等,我们暂时不关注,我们的权限规则需要在多处使用所以我们将它存到vuex里

// vue 组件
<li @click="login(['b'])">
 模拟用户1登录,权限['b'],跳转到页面B
</li>
<li @click="login(['c'])">
 模拟用户2登录,权限['c'],跳转到页面B,(用户2没有页面B权限,强行进入会gun去页面404)
</li>
// 登录模块---------------------------------------------------------
import { mapActions } from "vuex";
export default {
 methods: {
  ...mapActions([
   "set_roleRouterRules"
  ]),
  login(roleRouterRules) {
   // 登录成功,vuex 存储角色路由
   this.set_roleRouterRules(roleRouterRules);
   // 跳转到动态注册B
   this.$router.replace({ path: "/b" });
  }
 }
};

// vuex 对应功能实现-----------------------------------------------
// 引入第1步 定义的dynamicRouter 
import { dynamicRouter } from './router';
// 私有变量
state: {
  isAddRoutes: false,
  // 后端返回的原始数据默认存到 localStorage,每次初始化取出来
  roleRouterRules: JSON.parse(localStorage.getItem('roleRouterRules')),
},
// 公共变量 => 派生私有变量
getters: {
  isAddRoutes: state => state.isAddRoutes,
  // 根据 roleRouterRules 生成当前角色的动态路由配置数据(addRoutes方法可以直接使用的路由数组)
  roleRouter: state => {
    if (state.roleRouterRules) {
      return dynamicRouter.filter(
        router => state.roleRouterRules.indexOf(router.name) >= 0,
      );
    } else return null;
  },
},
// 私有方法(同步) => 改变静态变量
mutations: {
  set_isAddRoutes: (state, data) => (state.isAddRoutes = data), // payload: true/false
  set_roleRouterRules: (state, data) => (state.roleRouterRules = data), // payload: true/false
},
// 公共方法(可异步)=> 调用私有方法
actions: {
  set_isAddRoutes({ commit }, data) {
    commit('set_isAddRoutes', data);
  },
  set_roleRouterRules({ commit }, data) {
    // 保存到vuex
    commit('set_roleRouterRules', data);
    // 保存到 localStorage,当用户强制刷新浏览器时我们要使用这一份数据初始化 state.roleRouterRules
    localStorage.setItem('roleRouterRules', JSON.stringify(data));
  },
}

第3步 登录成功跳转权限页面(核心)

基本思路:

  • 所有的路由跳转都要做鉴权,
  • 不是动态路由(也就是默认路由)直接放过,
  • 是动态路由(也就是还未创建的,强行进入会被重定向到404,但依然可以在to.redirectedFrom获取到用户希望进去的路由),检查前端是否有路由权限规则数据
    • 没有,让他去登录页
    • 有,就根据 roleRouterRules 生成当前角色的动态路由配置数据并addRoutes添加到真实router,此时通过let path = to.redirectedFrom || to.path; 和 next(path); 再走一遍鉴权(这一次真实router上有它就进页面,还没有就代表这个用户没有这个页面访问权限gun去404)

注意事项:

  • addRoutes() 方法一个用户只能使用一次,所以要加一个状态值isAddRoutes到vuex里,每次用户进动态路由时检查 addRoutes 使用过没有
  • next() 方法没有参数会直接放行,有参数(例如 next({path:'/404'})) 放行后会再次进入router.beforeEach,一不小心就是死循环
import vuex from './vuex';
router.beforeEach((to, from, next) => {
  let path = to.redirectedFrom || to.path;
  // 白名单 放行
  if (whiteList.indexOf(path) >= 0) return next();
  // 黑名单
  if (!vuex.getters.roleRouter) return next({ path: '/login' });
  if (!vuex.getters.isAddRoutes) {
    console.log('path未注册,存在角色路由,立即注册尝试匹配');
    router.addRoutes(vuex.getters.roleRouter);
    vuex.dispatch('set_isAddRoutes', true);
    next(path);
  } else {
    console.log('已注册过动态路由,尝试匹配');
    next();
  }
});

第4步 切换不同角色用户

此处有坑, Vue Router 只提供了 addRoutes ,却没有删除和替换方法,所以只能通过强刷新浏览器来重置 Vue Router,先清空localStorage,在刷新时,初始化的Vue Router只有默认路由,用户只能去登录页了

还有一种方法我没看懂,感兴趣可以查看:https://github.com/vuejs/vue-router/issues/1234

exit() {
 localStorage.clear();
 window.location.reload();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
javascript实现行拖动的方法
May 27 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 #Javascript
深入理解JS异步编程-Promise
Jun 03 #Javascript
模块化react-router配置方法详解
Jun 03 #Javascript
react 组件传值的三种方法
Jun 03 #Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 #Javascript
Node.js 的 GC 机制详解
Jun 03 #Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 #Javascript
You might like
PHP PDO函数库详解
2010/04/27 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
php批量删除操作代码分享
2017/02/26 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python 中的 else详解
2016/04/23 Python
详解python读取和输出到txt
2019/03/29 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
食品安全宣传标语
2014/06/07 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL