React Native中设置Auth Token失效求助：API调用成功但Token无效

问题核心 #

你当前代码里ReactSession.setStoreType('Bearer', response.data.token)的用法完全错误，这个方法是用来设置存储介质类型（比如AsyncStorage），不是用来设置Token的类型和值，这直接导致Token没有被正确存储，后续自然无法生效。

修正步骤 #

1. 正确存储Token #

首先确保在App初始化时配置ReactSession的存储类型（React Native中需用AsyncStorage，不能用web的localStorage），然后把Token存在指定键名下：

// 入口文件（比如App.js）初始化存储类型
import ReactSession from 'react-client-session';
import AsyncStorage from '@react-native-async-storage/async-storage';

ReactSession.setStoreType(AsyncStorage);

// 注册请求的修正代码
axios({
  method: 'POST',
  url: 'http://127.0.0.1:8000/api/register',
  data: Data,
})
.then(async (response) => {
  console.log('working');
  // 确认response.data.token存在，可打印response.data检查
  console.log('返回的Token:', response.data.token);
  // 存储Token到ReactSession
  await ReactSession.set('authToken', response.data.token);
  await ReactSession.set('username', 'Meon');
})
.catch(error => {
  alert(JSON.stringify(error.response.data));
});

2. 后续请求自动携带Token #

要让Token发挥作用，所有需要授权的API请求都要在请求头里携带Authorization: Bearer <token>，可以用axios拦截器统一处理：

import axios from 'axios';
import ReactSession from 'react-client-session';

// 创建axios实例
const apiClient = axios.create({
  baseURL: 'http://127.0.0.1:8000/api'
});

// 请求拦截器：自动添加Authorization头
apiClient.interceptors.request.use(async (config) => {
  const token = await ReactSession.get('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

// 使用实例发送授权请求
apiClient.get('/protected-endpoint')
.then(res => console.log(res.data))
.catch(err => console.error(err));

3. 排查额外问题 #

• 确认后端返回的Token字段正确：检查response.data里是否真的有token字段（可能后端返回的是access_token，需对应修改）。
• 后端验证逻辑：确保后端正确解析请求头中的Bearer Token，比如Laravel需配置auth:api中间件，且Token验证逻辑正常。
• 兼容性备选：如果ReactSession在React Native中出现问题，直接用AsyncStorage存储更可靠：

  // 存储
  await AsyncStorage.setItem('authToken', response.data.token);
  // 获取
  const token = await AsyncStorage.getItem('authToken');
  

内容的提问来源于stack exchange，提问作者vivek kn