React Native登录后无法获取JWT令牌问题求助

1. 优先检查状态持久化逻辑 #

登录成功后仅更新Context内存状态是不够的，页面跳转或重启后状态会丢失，必须结合持久化存储（比如AsyncStorage）：

// 登录函数示例：先存持久化再更新Context
const login = async (credentials) => {
  const response = await api.post('/login', credentials);
  const { token, userId, username } = response.data;
  
  // 先写入本地存储
  await AsyncStorage.setItem('userToken', token);
  await AsyncStorage.setItem('userId', userId.toString());
  await AsyncStorage.setItem('username', username);
  
  // 再更新Context状态
  setUser({ token, userId, username });
};

同时在Context初始化时，从本地存储恢复状态：

useEffect(() => {
  const loadSavedUser = async () => {
    const token = await AsyncStorage.getItem('userToken');
    const userId = await AsyncStorage.getItem('userId');
    const username = await AsyncStorage.getItem('username');
    
    if (token && userId && username) {
      setUser({ token, userId: parseInt(userId), username });
    }
  };
  loadSavedUser();
}, []);

2. 确认页面在Context作用域内 #

检查「My Rentals」页面是否被AuthContext.Provider包裹，不在作用域内的组件无法读取Context状态：

// 根组件结构示例，确保所有页面在Provider内部
<AuthContext.Provider value={authContextValue}>
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="MyRentals" component={MyRentalsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
</AuthContext.Provider>

3. 排查令牌读取时机 #

在租赁页面中，避免在组件初始化时直接读取未就绪的Context状态，用useEffect监听状态变化：

const { user } = useContext(AuthContext);

useEffect(() => {
  if (user?.token) {
    // 令牌就绪后再调用接口
    fetchUserRentals(user.token);
  } else {
    // 无令牌时跳转登录页
    navigation.navigate('Login');
  }
}, [user, navigation]);

4. 验证存储与读取的一致性 #

添加日志对比登录后和租赁页面的令牌状态，定位问题环节：

// 登录成功后打印存储的令牌
const storedToken = await AsyncStorage.getItem('userToken');
console.log('Login stored token:', storedToken);

// 租赁页面挂载时打印
useEffect(() => {
  const checkToken = async () => {
    const savedToken = await AsyncStorage.getItem('userToken');
    console.log('My Rentals saved token:', savedToken);
    console.log('Context userToken:', user?.token);
  };
  checkToken();
}, [user]);

如果存储的令牌为空，说明登录时的异步存储操作未完成就更新了Context，需确保await执行完毕后再更新状态。

5. 后端返回字段匹配检查 #

确认后端返回的令牌字段名和前端解析的一致，比如后端返回token字段，前端不能误写为accessToken：

// 后端示例（Spring Boot）
@PostMapping("/login")
public ResponseEntity<?> login(@RequestBody LoginRequest request) {
  String jwtToken = jwtUtil.generateToken(userDetails);
  // 确保返回字段和前端解析的key一致
  return ResponseEntity.ok(new AuthResponse(jwtToken, user.getId(), user.getUsername()));
}

内容的提问来源于stack exchange，提问作者Zana Mélodie