使用axios拦截器刷新Next-Auth的token？

Question

我为我的 NextJs 项目设置了 Next-Auth 和 Axios。我对 axios 标头使用了 Next-Auth 中的 getSession() 方法。像这样

export const ApiAuth = () => {
  const instance = axios.create({
    baseURL: API_URL,
  });

  instance.interceptors.request.use(async (request) => {
    const session = await getSession();
    console.log(session);

    if (session) {
      request.headers["Authorization"] = `Bearer ${session.tokens.accessToken}`;
    }
    return request;
  });

  instance.interceptors.response.use(
    (response) => {
      return response;
    },
    (error) => {
      console.log(`error`, error);
      if (error.response.status === 401) {
        console.log("Let refresh Here");
        console.log("And update Next-Auth session data");
      }
    }
  );

  return instance;
};

但我不知道如何从 axios 拦截器更新 Next-Auth 会话数据。你能给我指路吗？

我想我将创建一个像 /api/auth/refresh 这样的 api，这个 api 处理更新新的访问令牌和 Next-Auth 的刷新令牌，并返回 axios 的新访问令牌。

Answer 1

我想知道同样的事情，因为我喜欢 jwt 刷新的拦截器方法。问题似乎是 next-auth 只暴露了（据我所知）用于更新会话的钩子：

const { update } = useSession()

然后您可以使用新的

accessToken

来调用此更新，例如：

update({ accessToken })

您可以在

[...nextauth]

中处理这个问题（这是来自文档的字面意思）：

jwt({ token, trigger, session }) {
      if (trigger === "update" && session?.accessToken) {
        // set the new accesstoken
        token.accessToken = session.accessToken
      }
      return token
}

在会话回调中，您仍然需要（无法从代码中看出）

async session({ session, token }) {
    session.accessToken = token.accessToken;
    session.refreshToken = token.refreshToken; // i added this for completeness, you may want to remove this as its already set
    return session;
}

这就是我的实现方式，但我不再使用拦截器，而是使用反应钩子代替间隔。您可能仍然可以通过将更新方法传递给 ApiAuth 并从您的 React 应用程序中实例化您的 api 客户端来使用拦截器来完成这项工作。您也可以在此时通过会话而不使用

await getSession()

export const ApiAuth = ({ update }) => { ... }

文档：

https://next-auth.js.org/getting-started/client#updating-the-session