Ant Design Vue Pro动态路由加载,服务器重启首页白屏问题

Antd Pro动态路由加载，服务器重启首页白屏

刚接手的一个项目，将静态路由改为动态路由，使用的是Ant Design Vue Pro框架。

其中遇到了点问题纪录一下。

问题点

后端重启服务器后，页面过期重定向到登陆页面，登录之后绕过了permission.js中router.beforeEach()这个钩子

所以里面的逻辑都没有走，拿不到路由。

但是登录会走登录接口，跳转首页白屏，

解决方法

• 登录的时候让后端在返回值的时候带上该账户的权限列表；
• 登陆成功后对权限进行缓存；
• 在generator-routers.js中取该缓存下来的权限；
• 最重要的一点就是在request.js文件中请求拦截的时候移除掉缓存，同时千万不要去调用resetRouter()这个方法，这个方法是重置路由的

// 重置路由
export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。