React Native中state/context传JWT给Axios报401问题求助

1. 修复Token持久化与加载顺序问题 #

state是内存级存储，应用重启后会重置，导致请求时header携带的token为空或无效。必须将token存入持久化存储（如AsyncStorage），并确保组件初始化时先加载token再发起请求：

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

const [userJwtToken, setUserJwtToken] = useState(null);

// 组件挂载时优先加载本地存储的token
useEffect(() => {
  const initTokenAndFetch = async () => {
    const savedToken = await AsyncStorage.getItem('userToken');
    if (savedToken) {
      setUserJwtToken(savedToken);
      // 确保token加载完成后再请求数据
      fetchPosts();
    }
  };
  initTokenAndFetch();
}, []);

const fetchPosts = async () => {
  // 提前校验token，避免空值请求
  if (!userJwtToken) return;

  try {
    const response = await axios({
      method: 'GET',
      url: `${BASE_API_URL}/posts/all`,
      headers: {
        'Get-Auth': userJwtToken.trim() // 清除可能存在的空格/换行符
      }
    });
    setPostsData(response.data);
  } catch (err) {
    console.log(err);
  } finally {
    setPostLoading(false);
    setRefreshing(false);
  }
};

2. 校验Token格式与后端接收逻辑 #

• 打印JSON.stringify(userJwtToken)，对比硬编码的token，确保两者完全一致（无多余引号、换行符）。
• 在Express后端打印req.headers['get-auth']（HTTP头会被转成小写），确认前端传递的token是否正确。

3. 统一配置Axios实例 #

创建Axios实例并添加请求拦截器，确保每次请求都使用最新的token，避免state更新不及时导致的旧token请求：

// 创建全局Axios实例
const api = axios.create({
  baseURL: BASE_API_URL,
});

// 请求拦截器：动态注入token
api.interceptors.request.use((config) => {
  if (userJwtToken) {
    config.headers['Get-Auth'] = userJwtToken.trim();
  }
  return config;
}, (error) => Promise.reject(error));

// 使用实例发起请求
const fetchPosts = async () => {
  if (!userJwtToken) return;

  try {
    const response = await api.get('/posts/all');
    setPostsData(response.data);
  } catch (err) {
    console.log(err);
  } finally {
    setPostLoading(false);
    setRefreshing(false);
  }
};

4. 解决GET请求加数据导致的Network Error #

GET请求不能在data字段传参，需将参数放在params中：

// 错误写法（触发Network Error）
await axios.get('/posts/all', { data: { id: 1 } });

// 正确写法
await axios.get('/posts/all', { params: { id: 1 } });

额外排查点 #

• 确认React Native应用的网络权限：Android需在AndroidManifest.xml添加<uses-permission android:name="android.permission.INTERNET"/>；iOS需在Info.plist配置允许HTTP请求。
• 检查Express后端的CORS配置是否允许自定义Get-Auth头。

内容的提问来源于stack exchange，提问作者Ricky Donald