如何将我的 JWT 令牌附加到每个 axios 调用？答案

【问题标题】：How can I attach my JWT token to every axios call?如何将我的 JWT 令牌附加到每个 axios 调用？
【发布时间】：2021-09-27 08:30:24
【问题描述】：

我正在开发我的第一个 nextjs 应用程序。我正在使用 axios 实例来处理我对后端的调用

export const httpClient = axios.create({
  baseURL: `${process.env.BASE_URL}`,
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

我也在使用 next-auth 来处理我的身份验证和授权

const callbacks = {
  async jwt(token, user) {
    if (user) {
      token.accessToken = user.access_token;
    }
    return token;
  },

  async session(session, token) {
    session.accessToken = token.accessToken;
    return session;
  },
};

对身份验证端点的调用工作正常。如果我console.log() api 响应，我可以看到返回的 JWT 令牌。

我现在尝试将该 JWT 令牌附加到每个 axios 请求，但调用 await getSession() 始终是 null。我写了以下请求拦截器

httpClient.interceptors.request.use(
  async (config) => {
    const session = await getSession();
    if (session) { // this never evaluates to true. Session is always `null`
      console.log(session);
      config.headers.Authorization = `Bearer ${session?.accessToken}`;
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

按照文档，我将_app.js <Component> 包装为

<Provider session={pageProps.session}>
   <Component {...pageProps} />
</Provider>

有什么我可以尝试的想法吗？

编辑：我在代码的另一部分（在 nextjs 前端）调用 const [session, loading] = useSession();，一切似乎都在工作

【问题讨论】：

也许你的 getSession() 函数有问题。你也可以发一下吗？
getSession() 函数是 next-auth 库的一部分。不是自己写的。
axios 实例和拦截器在哪里声明？
我不确定我明白你在问什么。你是什么意思？
我遇到了同样的问题，getSession() 总是返回 null，你能解决这个问题吗？

标签： axios next.js next-auth

【解决方案1】：

问题是如果axios调用是在服务端进行的，那么拦截器也会在服务端执行。

如果是这种情况，在服务器端调用getSession() 时，您还必须将请求或上下文传递给它（参见manual entry for getSession 底部的注释）

【讨论】：