Vue-Pure-Admin项目中路由菜单加载问题的分析与解决

问题背景

在使用Vue-Pure-Admin精简版5.1.0时，开发者遇到了一个特殊的问题：本地启动项目一段时间后，刷新页面会导致菜单栏一直显示加载圈，无法正常显示。控制台没有任何报错信息，初步排查发现是获取不到异步路由菜单导致的。

问题排查过程

1. 初步分析：通过代码对比发现，新版本将路由菜单的存储方式从每次刷新重新加载改为了使用localStorage存储。开发者尝试将存储方式改回sessionStorage后，问题暂时解决。

2. 深入调查：进一步排查发现，真正的问题根源在于请求拦截器中对白名单的检查逻辑。当项目配置了代理时，请求路径会被添加前缀（如/api），导致白名单检查失败。

3. 新旧版本对比：

   • 旧版本使用indexOf方法检查白名单，即使路径添加了前缀也能匹配成功
   • 新版本使用严格相等===检查，添加前缀后无法匹配白名单路径

问题原因

问题的根本原因是代理配置与白名单检查逻辑的不兼容。当配置了类似如下的代理：

server: {
  proxy: {
    "/api": {
      target: "http://127.0.0.1:3000",
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, "")
    }
  }
}

原本的请求路径/refresh-token会被代理转换为/api/refresh-token，而新版本的白名单检查使用严格相等比较，导致无法匹配到白名单中的路径，进而无法刷新token，最终表现为菜单加载卡住。

解决方案

1. 临时解决方案：

   • 修改白名单检查逻辑，使用indexOf代替严格相等比较
   • 或者将存储方式改回sessionStorage

2. 推荐解决方案：

   • 在项目配置中明确区分代理前缀和白名单路径
   • 修改白名单检查逻辑，使其能够兼容代理前缀的情况
   • 考虑将白名单配置独立出来，便于维护和修改

3. 配置建议：

   • 在vite.config.ts中添加注释说明代理前缀对白名单的影响
   • 在项目文档中明确说明代理配置与白名单的关系

经验总结

1. 在修改存储策略时，需要考虑所有相关的影响点，特别是涉及认证和授权的部分
2. 代理配置与API请求处理需要保持一致性，避免因路径转换导致的功能异常
3. 白名单检查逻辑应该具有一定的灵活性，能够适应不同的部署环境
4. 对于关键功能的修改，应该进行充分的测试，包括各种边界情况

最佳实践建议

1. 对于企业级项目，建议将API配置（包括白名单）集中管理
2. 考虑使用环境变量来区分不同环境下的API配置
3. 实现一个灵活的白名单检查工具函数，能够处理各种路径匹配场景
4. 在项目文档中详细说明API相关的配置要求和注意事项

通过这次问题的排查和解决，我们不仅找到了具体的技术解决方案，更重要的是理解了系统各组件之间的相互影响关系，这对今后开发和维护类似项目具有重要的参考价值。