使用VueRouter的addRoutes方法实现动态添加用户的权限路由
前端  /  管理员 发布于 4年前   763
最近做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 组件
// 登录模块---------------------------------------------------------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步 登录成功跳转权限页面(核心)
基本思路:
注意事项:
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();}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号