项目使用vue-router动态加载后端传过来的菜单,拼接后赋值给路由。现在由于在用户注销的时候没有resetRouter导致权限不同的用户切换,会出现路由权限错乱的问题。
网伤查了下资料,发现要调用resetRouter方法。
这是定义的router.js文件
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store.js'
Vue.use(Router)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export let routes = [{
path: '/login',
name: 'login',
meta: {
requireAuth: false
},
component: (resolve) => require(['@/single/Login.vue'], resolve)
},{
path: '/share',
name: 'share',
meta: {
requireAuth: false
},
component: (resolve) => require(['@/single/ShareView.vue'], resolve)
},{
path: '/template',
name: 'template',
meta: {
requireAuth: false
},
component: (resolve) => require(['@/template/Index.vue'], resolve)
}
]
const createRouter = () => new Router({
routes: routes
})
const router = createRouter()
//写一个重置路由的方法,切换用户后,或者退出时清除动态加载的路由
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // 新路由实例matcer,赋值给旧路由实例的matcher,(相当于replaceRouter)
}
//不需要权限的白名单path
const whiteList = ['/login', '/share','/template']
// 拦截登录,token验证
router.beforeEach((to, from, next) => {
//代码省略
})
function mergeRoutes(routerList) {
//代码省略
}
export default router
我在登陆或者注销的地方使用
this.$router.resetRouter();
还是
import router from './router.js'
router.resetRouter();
都会报对象没有这个方法。
然后把对象打印出来就如下图
求助一下大家,是我router引用错了吗?还是哪里配置有问题?
你定义的resetRouter又不是你router对象的一个方法,是单独export的方法
import {resetRoute} from './router.js'
resetRoute()
这样调用才对
https://www.cnblogs.com/xiaoyuchen/p/11211987.html
我们之前做过很多项目 我没记得使用过这个方法。
有一个思路 楼主可以借鉴一下。
就是菜单从服务器获取之后存储在本地 localstorage 或者sessionstorage Vuex 里
退出的时候 把这部分数据删除 就看不到菜单了。
理论上退出了 有这部分数据 也看不到菜单 除非是权限没控制好
登录之后 不管本地有没有菜单数据 都会从服务器重新取到用户数据和菜单 覆盖掉 本地的数据 所以也不会看到其他用户的菜单的
Router.prototype.resetRouter=function resetRouter(routes) {
let newRouter = new Router({
routes: routes
})
this.matcher = newRouter.matcher ;
}
//把自己定义的方法挂载在 router下。 通过传参 给路由赋值。
this.$router.resetRouter(routes);
渲染后端返回路由数据用Router.addRoutes(路由数据),在Router.beforeEach获取后端返回的路由表数据,根据权限生成可访问的路由表