Vue-Pure-Admin项目中代理配置与请求白名单的注意事项

问题背景

在使用Vue-Pure-Admin精简版5.1.0时，开发者遇到了一个页面加载异常的问题：本地启动一段时间后刷新页面，菜单栏会一直显示加载圈。经过深入排查，发现问题源于项目代理配置与请求白名单检查机制之间的不匹配。

问题分析

现象表现

• 控制台无任何报错信息
• 页面卡在加载状态
• 异步路由菜单获取失败
• 与localStorage/sessionStorage存储机制无关

根本原因

问题的核心在于项目配置了API代理前缀后，请求拦截器中的白名单检查逻辑失效。具体表现为：

1. 代理配置示例：

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

2. 白名单检查机制变更：

• 旧版本使用indexOf进行包含判断
• 新版本使用严格相等===判断

当请求路径为/refresh-token时：

• 实际请求变为/api/refresh-token
• 严格相等检查失败
• 导致token刷新机制失效
• 最终造成页面加载卡死

解决方案

临时解决方案

1. 修改白名单检查逻辑，恢复使用indexOf方法
2. 或者调整代理配置，避免路径前缀影响

长期建议

1. 将白名单配置独立为项目配置项
2. 在项目文档中明确说明代理配置与白名单的关系
3. 白名单检查应考虑以下情况：
   • 精确匹配原始路径
   • 匹配代理后的路径
   • 支持正则表达式匹配

最佳实践

对于使用Vue-Pure-Admin的开发者，建议：

1. 检查项目中的代理配置
2. 确认白名单检查逻辑是否适配当前代理设置
3. 考虑以下实现方式：

// 改进后的白名单检查
const isWhiteList = (path: string) => {
  const whiteList = ['/refresh-token', '/login']; // 可配置化
  return whiteList.some(item => 
    path === item || 
    path.startsWith(`/api${item}`) // 适配代理前缀
  );
}

4. 对于生产环境，建议：
   • 统一API请求路径规范
   • 避免开发环境与生产环境的路径差异
   • 使用环境变量管理不同环境下的配置

总结

Vue-Pure-Admin作为一款优秀的前端框架，在实际使用中需要注意代理配置与内部机制的兼容性。特别是在涉及权限验证、token刷新等核心功能时，请求路径的匹配逻辑需要谨慎处理。通过合理的配置和适度的自定义，可以确保项目在各种环境下稳定运行。

对于框架维护者而言，将这类与部署环境强相关的配置项暴露给开发者自定义，并提供清晰的文档说明，将大大降低使用门槛，提升开发体验。