后台管理系统中动态路由缓存的问题

1.问题分析

在一些具有动态权限的后台系统中,假设以管理员身份登录了后台系统,然后再次切换到普通员工身份登录后台系统,此时会存在一个问题,即普通员工身份也可以访问到需要管理员身份的路由页面,这种情况是不允许的,因此需要进行处理

2.分析与解决步骤

1.问题分析=>管理员退出登录时,切换普通员工登录时,会出现的情况

2.问题点的确定=>退出登录时,我们需要对现有的路由缓存进行清除

3.步骤

​ 3.1.在router/index.js中封装一个用来清除缓存路由的函数

​ 3.2.在点击退出登录后,导入清空动态路由缓存即可

//1.router/index.js
// github 关于router社区https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
//重置缓存路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher //将新的路由实例matcher赋值给旧的路由实例
}

//点击调用退出的功能函数  methods  
async logout() {
      await this.$store.dispatch('user/logout') //调用vuex中封装好的清除token等方法
      // 清除路由缓存
      resetRouter()
      }