解决Ant Design Vue pro切换不同权限账号,左侧菜单不刷新的问题。

大群

在使用ant design vue pro时,原本登录的是普通用户的账号,然后退出登录,切换到admin账号时,发现左侧菜单还是原来普通用户的菜单,需要刷新一下才能正常显示。

第一次修改的想法是登录成功后进行页面刷新,但闪一下对用户体验不太好,这个时候就可以采用重置路由的方法。

router/index.js

const createRouter = () => new Router({
  mode: 'hash',
  routes: constantRouterMap
})
const router = createRouter()
// 导出一个重置路由的方法,退出时清除动态加载的路由
export function resetRoute () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}
export default router

在退出登录的地方store/modules/user.js

import { resetRoute } from '@/router'

// 登出
Logout ({ commit, state }) {
  return new Promise((resolve) => {
    logout(state.token).then(() => {
      resolve()
    }).catch(() => {
      resolve()
    }).finally(() => {
      // 在这里执行重置路由
      resetRoute()
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      storage.remove(ACCESS_TOKEN)
      Cookies.remove(ACCESS_TOKEN, { path: '/', domain: process.env.VUE_APP_DOMAIN })
    })
  })
}

然后切换不同用户左侧菜单就没有问题啦!

阅读 2.2k
65 声望
3 粉丝
0 条评论
65 声望
3 粉丝
文章目录
宣传栏