如何为每个Axios请求添加动态变化的Session Cookie？

我正在使用Expo开发一款采用Session Cookie认证的应用，后端基于express sessions实现。用户登录成功后，我将服务器返回的token存储在设备的Async Storage中；当用户登出或checkAuth校验失败（如会话过期）时，会清除Async Storage中的token并将状态设为未认证，这部分逻辑运行正常。

现在遇到的问题：除登录和认证校验外的其他请求（如登出请求）也需携带当前存储的token进行授权。我使用Axios尝试通过自定义Axios实例添加token，但代码未达到预期效果，想咨询该方案是否可行或有无更优实现方式。

原代码如下：

import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const getStoredSessionID = async () => { // this function gets the auth token from storage
  try {
    const value = await AsyncStorage.getItem('local_sid');
    return value;
  } catch (e) {
    alert("Async storage error")
  }
};

const axiosInstance = axios.create({
    baseURL: 'http://192.168.0.6:3002',
    timeout: 4000,
    headers: {'Cookie': `user_sid=${getStoredSessionID}`}
  });
  export default axiosInstance;

你的方案思路没问题，但代码存在核心错误：getStoredSessionID是异步函数，直接在axios.create的headers中引用时，并不会等待它执行完成拿到token值，最终Cookie头会被设为user_sid=[object Promise]，自然无法通过后端认证。

而且这种写法只会在创建Axios实例时读取一次token，后续如果token更新（比如用户重新登录），实例的headers不会自动同步最新值。

使用Axios的**请求拦截器（Request Interceptor）**是最优方案。拦截器可以在每次发起请求前执行异步逻辑，动态获取最新的token并添加到请求头中，完美解决异步获取和token更新的问题。

import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 创建基础Axios实例
const axiosInstance = axios.create({
  baseURL: 'http://192.168.0.6:3002',
  timeout: 4000,
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  async (config) => {
    // 每次请求前异步获取最新的session token
    const sessionId = await AsyncStorage.getItem('local_sid');
    
    if (sessionId) {
      // 如果token存在，设置Cookie头
      config.headers.Cookie = `user_sid=${sessionId}`;
    }
    
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

export default axiosInstance;

• 未登录/无token场景：如果sessionId不存在（比如用户未登录），可以在这里添加逻辑，比如取消请求、跳转到登录页，或者直接返回原config让后端处理未授权情况。
• 错误处理优化：可以把AsyncStorage.getItem的错误捕获移到拦截器里，避免全局alert影响用户体验，比如：

  try {
    const sessionId = await AsyncStorage.getItem('local_sid');
    // 设置Cookie逻辑
  } catch (e) {
    console.error('读取Session ID失败:', e);
    // 可选：在这里处理错误，比如清空无效token
  }
  

• 登出同步：登出时已经清除AsyncStorage的token，后续请求拦截器会自动读取到空值，不会携带Cookie头，符合预期逻辑。

内容的提问来源于stack exchange，提问作者Kristoffer Andersson