在ts-rest项目中优雅处理异步认证令牌的实践

问题背景

在使用ts-rest进行API调用时，经常需要在请求头中携带认证令牌。然而，获取令牌本身可能是一个异步过程，这给开发者带来了如何在查询钩子中正确处理异步令牌的挑战。

常见错误做法

许多开发者会尝试直接在查询函数内部异步获取令牌，例如：

const { data } = orderQueryClient.getOrders.useInfiniteQuery(
  ["allOrders"],
  async ({ pageParam = 1 }) => {
    const authToken = await fetchAuthToken(); // 异步获取令牌
    return {
      headers: { authorization: authToken },
      // 其他参数...
    };
  }
);

这种做法会导致TypeScript报错，因为查询函数期望返回的是普通对象而非Promise。

推荐解决方案

方案一：使用自定义Hook封装令牌逻辑

更符合React响应式原则的做法是将令牌管理封装到自定义Hook中：

// useAuthToken.ts
const useAuthToken = () => {
  const [authToken, setAuthToken] = useState<string | null>(null);
  
  const fetchToken = async () => {
    const token = await fetchAuthToken();
    setAuthToken(token);
    return token;
  };

  return { authToken, fetchToken };
};

然后在组件中使用：

const { authToken } = useAuthToken();

const { data } = orderQueryClient.getOrders.useInfiniteQuery(
  ["allOrders"],
  ({ pageParam = 1 }) => ({
    headers: { authorization: authToken },
    // 其他参数...
  })
);

方案二：创建全局客户端实例

更优雅的方式是创建一个封装了认证逻辑的客户端Hook：

// useClient.ts
export const useClient = () => {
  const { authToken } = useAuthToken();
  
  const baseHeaders = useMemo(() => ({
    authorization: authToken
  }), [authToken]);

  return initQueryClient(contract, {
    baseUrl: 'https://api.example.com',
    baseHeaders,
  });
};

在组件中使用：

const client = useClient();
client.getOrders.useInfiniteQuery(...);

实现细节

1. 令牌存储：建议将令牌存储在状态管理或上下文中，确保全局可用
2. 令牌刷新：实现令牌过期自动刷新机制
3. 错误处理：添加令牌无效时的错误处理和重试逻辑
4. 性能优化：使用useMemo避免不必要的重新渲染

最佳实践

1. 将认证逻辑与业务逻辑分离
2. 使用React的响应式特性管理令牌状态
3. 避免在查询函数内部进行异步操作
4. 考虑令牌的缓存和过期策略

通过这种方式，可以构建出既符合React设计原则又易于维护的API调用层，同时保证了认证的安全性。