背景
最近项目需要添加页面权限,根据不同权限的用户显示不同的页面
思路
登录成功之后将后端返回的页面数据处理成自己需要的格式,遍历处理好的数据,然后通过router.addRoute方法将每个数据添加到路由当中即可,退出登录的时候需要初始化路由
遇到的问题
- 刷新页面路由初始化
- 保存数据丢失
- 重复添加路由
刷新页面路由初始化
可以在main.js中引入一个新建的文件permission.js,每次刷新的时候都会执行一次路由添加
保存数据丢失
我一开始把数据存入sessionStorage中,发现里面的文件数据没有了,后来才意识到sessionStorage是不保存文件数据的,另外我用JSON.parse(JSON.stringify())深拷贝数据的时候发现文件数据也丢失了,所以这里路由的component可以动态添加,不要写死,如果vuex数据不保存到sessionStorage中就不需要动态添加了.
重复添加路由
当我登录用户然后退出登录,再次登录之后就会发现页面报错,刷新页面就不会报错,后来才发现是因为我每次登录都会重复添加路由导致的,刷新页面因为路由初始化了所以报错消失了.
解决方式:
function resetRouter () {
const newRouter = createRouter()
router.matcher = newRouter.matcher
}
const createRouter = () => {
return new VueRouter({
routes: routerArr
})
}
