Hono.js 中如何正确传递 Bearer Token 请求头

在使用 Hono.js 进行 API 开发时，身份验证是一个常见需求。许多开发者会选择使用 JWT（JSON Web Token）作为身份验证机制，通过 Bearer Token 的方式在请求头中传递。然而，在 Hono.js 的 RPC 客户端中传递请求头的方式有其特殊性，需要特别注意。

常见误区

很多开发者会尝试以下方式传递请求头：

const response = await client.api.v1.tickets.read.$get({
  headers: {
    Authorization: `Bearer ${token}`
  }
})

这种方式看似合理，但实际上在 Hono.js 的 RPC 客户端中并不能正常工作。这是因为 Hono.js 的 RPC 客户端方法（如 $get、$post 等）的参数结构有其特定的设计。

正确方法

Hono.js 的 RPC 客户端方法通常接受两个参数：

1. 第一个参数是请求体（对于 GET 请求通常为 undefined）
2. 第二个参数是配置对象，其中可以包含 headers 属性

正确的写法应该是：

const response = await client.api.v1.tickets.read.$get(undefined, {
  headers: {
    Authorization: `Bearer ${token}`
  }
})

实现原理

这种设计源于 Hono.js 的 RPC 机制。Hono.js 的 RPC 客户端会自动处理请求的序列化和反序列化，同时提供了一种统一的方式来配置请求参数。将请求头放在第二个参数中，可以保持与浏览器 Fetch API 类似的设计模式，同时也为更复杂的配置提供了扩展性。

最佳实践

在实际开发中，建议：

1. 将 API 客户端调用封装在自定义 Hook 或服务层中
2. 统一处理错误和响应
3. 确保 Token 存在性检查
4. 考虑添加请求拦截器来统一添加认证头

以下是一个更完整的示例：

export const useGetTickets = (token: string) => {
  const query = useQuery({
    queryKey: ['tickets', token],
    queryFn: async () => {
      if (!token) throw new Error('No token provided');

      try {
        const response = await client.api.v1.tickets.read.$get(undefined, {
          headers: {
            Authorization: `Bearer ${token}`
          }
        });
        
        if (!response.ok) throw new Error('Failed to fetch tickets');
        
        const { data } = await response.json();
        return data;
      } catch (error) {
        // 统一错误处理
        throw new Error('API request failed');
      }
    },
  });

  return query;
};

通过这种方式，可以确保在 Hono.js 应用中正确、安全地传递 Bearer Token 进行身份验证。