Next 14，使用 next-auth 刷新令牌的 Axios 拦截器 - 新问题

Question

我目前在尝试使用 Next-Auth 实现 Axios 拦截器来处理 Next.js 14 应用程序中的刷新令牌时遇到问题。该问题似乎是在 Next.js 最新更新后出现的。

问题描述：

当我尝试创建拦截器并利用 Next-Auth 中的 useSession 来检索拦截器的访问和刷新令牌时，就会出现问题。由于 useSession 是一个钩子，我知道它只能在客户端组件中使用，但我不知道如何有效地实现此功能。

我正在遵循一个教程（视频链接），其中的实现与我所描述的完全一样，但我遇到了问题。

截图供参考：

具体问题：

如何在 Next.js 14 应用程序中有效地实现带有 Next-Auth 的 Axios 拦截器，特别是考虑到使用 useSession 等钩子的限制？ Next.js 14 是否存在任何可能导致此问题的已知问题或兼容性问题？ 任何指导、代码片段或类似实现的参考都将不胜感激。预先感谢您的帮助！

遵循视频教程：我严格按照参考视频中的说明进行操作，希望它能够与 Next.js 14 和 Next-Auth 一起使用。这涉及设置 Axios 拦截器并使用 useSession 来检索令牌。

创建拦截器：我在应用程序中设置了一个 Axios 拦截器，打算用它来刷新令牌。

使用useSession：我尝试使用useSession钩子来访问当前会话并检索拦截器所需的令牌。

预期结果：

我预计通过执行这些步骤，Axios 拦截器将与 Next-Auth 无缝集成以处理令牌刷新场景。具体来说，我预计拦截器会：

检测访问令牌何时过期。 使用刷新令牌获取新的访问令牌。 使用新的访问令牌重试原始请求。 实际结果：

但是，我遇到的问题可能是由于钩子的性质及其在 React 组件之外的使用，或者可能是由于 Next.js 14 最近的一些更改。我面临的具体问题是：

在 Axios 拦截器设置中正确实现 useSession 钩子很困难。 在这种情况下访问和刷新令牌的正确方法存在不确定性。

Answer 1

我也有同样的错误。

问题在于，React Components 和 Custom Hook 中都没有调用

useAxiosAuth()

方法（这会导致 Invalid Hook 错误）。

另外，如果你看到教程视频（14:37~），导师会调用HomePage组件中的

useAxiosAuth()

方法。

因此，该错误与 next js 的最新版本无关，并且您的

useAxiosAuth.ts

中没有问题。