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

Posted 2023-02-21

【中文标题】如何将我的 JWT 令牌附加到每个 axios 调用？

【英文标题】：How can I attach my JWT token to every axios call?

【发布时间】：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，你能解决这个问题吗？

【参考方案1】：

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

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