背景
最近项目过程中出现了一个奇怪的问题,当用户登入系统后部分路由首次跳转时会出现空白页面,但是在该页面上刷新又可以正常显示路由对应的页面。
系统内包含用户、角色、菜单等管理模块,前端使用了动态路由
问题复现
- 系统内有两个角色,A1和A2
- A1角色包含P1、P2、P3页面的权限
- A2角色包含P1、P2、P3、P4、P5页面的权限
- 当首次使用A1角色对应的用户登入系统时,侧边栏所有菜单都可以正常访问
- 此时退出A1角色对应的用户并使用A2角色对应的用户登入系统,其中P1、P2、P3菜单对应的页面可以正常访问,但是P4、P5对应的页面首次访问时出现空白的情况,刷新后P4、P5对应的页面可以正常访问
猜想原因
由于项目内使用到了Vue-Router动态路由,猜想可能是因为用户退出登录后再次登入,未重新挂载新的路由导致的。
动态路由代码如下:
// 路由前置导航守卫,处理页面刷新、登录退出
router.beforeEach((to, from, next) => {
// 登录页直接跳转
if (to.path === '/login') {
next();
// 回到登录页面,清除路由、当前登录人等信息
clearDynamicMenus();
clearUser();
// 非登录页面需要校验是否已登录、是否页面刷新
}