Vue addRoute实现动态权限路由菜单

背景

最近项目需要添加页面权限,根据不同权限的用户显示不同的页面

思路

登录成功之后将后端返回的页面数据处理成自己需要的格式,遍历处理好的数据,然后通过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
  })
}