在使用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 })
})
})
}
然后切换不同用户左侧菜单就没有问题啦!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。