React Native登录后无法自动跳转至授权页面问题排查

问题根源 #

你的useAuth Hook仅在组件初始化时执行一次fetchData获取Token，登录成功保存Token后，没有触发重新获取Token的逻辑，导致userToken/adminToken状态未更新，路由组件无法感知Token变化，因此不会自动切换到授权页面。

具体修复步骤 #

1. 更新authUtils.ts，添加手动刷新Token的方法

修改useAuth，暴露refreshAuth方法用于登录成功后触发Token重新获取，同时优化状态互斥逻辑：

import { useEffect, useState } from "react";
import { getUserToken, getAdminToken } from "./localService";

export const useAuth = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [userToken, setUserToken] = useState<string | null>(null);
  const [adminToken, setAdminToken] = useState<string | null>(null);

  const fetchData = async () => {
    try {
      const adminToken = await getAdminToken();
      if (adminToken) {
        setAdminToken(adminToken);
        setUserToken(null); // 确保管理员/用户Token互斥
      } else {
        const userToken = await getUserToken();
        setUserToken(userToken);
        setAdminToken(null);
      }
    } catch (error) {
      console.log("Error while fetching data:", error);
    } finally {
      setIsLoading(false);
    }
  };

  // 暴露刷新方法，供登录组件调用
  const refreshAuth = async () => {
    setIsLoading(true);
    await fetchData();
  };

  useEffect(() => {
    fetchData();
  }, []);

  return { isLoading, userToken, adminToken, refreshAuth };
};

2. 在登录组件中调用refreshAuth

以管理员登录组件AdminLogin为例，在保存Token成功后调用refreshAuth更新状态：

import { useAuth } from "../../services/authUtils";
import { saveAdminToken } from "../../services/localService";

const AdminLogin = () => {
  const { refreshAuth } = useAuth();

  const handleLogin = async () => {
    // 这里替换为你的登录请求逻辑
    const loginResponse = await apiAdminLogin(/* 账号密码等参数 */);
    await saveAdminToken(loginResponse.token);
    
    // 登录成功后触发状态刷新
    await refreshAuth();
  };

  return (
    // 登录UI代码
  );
};

用户登录组件UserLogin同理，调用saveUserToken后执行refreshAuth即可。

3. 修复localService.ts的冗余判断

React Native环境中不存在window对象，删除getUserToken中的无效判断：

export const getUserToken = async () => {
  try {
    const token = await AsyncStorage.getItem("user");
    return token ?? null;
  } catch (error) {
    console.log("Error while retrieving user token:", error);
    return null;
  }
};

为什么之前的尝试无效？ #

你之前在登录函数中调用获取Token的方法，仅能拿到Token值，但没有更新useAuth Hook中的状态变量。React组件只有在状态或Props变化时才会重新渲染，必须通过refreshAuth触发状态更新，才能让路由组件感知到Token变化并自动切换页面。

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