Wretch项目中的302重定向处理实践

在前后端分离的现代Web应用中，处理HTTP重定向是一个常见需求。本文将以Wretch这个轻量级Fetch封装库为例，探讨如何优雅地处理302重定向场景，特别是在身份认证流程中的应用。

302重定向的典型场景

在BFF(Backend For Frontend)架构中，后端服务通常会处理认证逻辑。当用户未登录时，服务端会返回302状态码，将用户重定向到认证服务(如Auth0)。前端应用需要捕获这种重定向行为，并做出相应处理。

Wretch的基本处理方式

Wretch作为Fetch的封装，提供了简洁的API来处理HTTP请求。对于302重定向，开发者通常会遇到以下两种处理方式：

1. 自动跟随重定向：这是Fetch的默认行为，但会丢失原始302响应信息
2. 手动处理重定向：通过设置redirect: "manual"选项，可以拦截302响应

最佳实践方案

Wretch提供了中间件机制，可以优雅地处理重定向逻辑：

const api = wretch(baseUrl)
  .options({ 
    credentials: "include", 
    mode: "cors", 
    redirect: "manual" 
  })
  .middlewares([
    (next) => (url, opts) => {
      return next(url, opts).then(res => {
        if (res.status === 302) {
          redirectToLogin(); // 自定义的重定向处理函数
        }
        return res;
      });
    }
  ]);

这种方式的优势在于：

• 明确捕获302状态码，而非依赖错误处理
• 保持了代码的可读性和可维护性
• 可以集中处理所有API请求的重定向逻辑

常见问题与解决方案

1. 状态码丢失问题：某些情况下Fetch可能无法正确传递状态码。这时可以：

   • 确保使用最新版浏览器
   • 检查CORS配置是否正确
   • 考虑使用Response.redirected属性作为备选方案

2. 错误处理：对于网络错误等特殊情况，仍需要补充错误处理逻辑：

.catcherFallback((err) => {
  if (!err.status) {
    // 处理网络错误等特殊情况
  }
});

总结

在Wretch中处理302重定向时，推荐使用中间件机制来明确捕获和处理重定向响应。这种方法相比通用的错误处理更加精准和可靠，特别适合身份认证等关键业务流程。通过合理配置Fetch选项和Wretch中间件，开发者可以构建健壮的前端HTTP请求处理逻辑。