token过期跳转登录页 raact native

在React Native中，可以使用AsyncStorage来存储用户的token，并在应用启动时检查token是否存在和是否过期。如果token不存在或过期，可以使用React Navigation进行页面跳转到登录页。

下面是一个简单的实现示例：

1. 在应用启动时，检查token是否存在和是否过期：

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

// 检查token是否存在和是否过期
const checkToken = async () => {
  try {
    const token = await AsyncStorage.getItem('token');
    const expiry = await AsyncStorage.getItem('expiry');
    if (token && expiry && Date.now() < parseInt(expiry)) {
      // token存在且未过期，可以直接使用
      return true;
    } else {
      // token不存在或已过期，需要重新登录
      return false;
    }
  } catch (error) {
    // 处理错误
    console.log(error);
    return false;
  }
}

// 在应用启动时检查token
const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    checkToken().then((result) => {
      setIsAuthenticated(result);
    });
  }, []);

  // ...
}

2. 在需要跳转到登录页的地方，使用React Navigation进行页面跳转：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  // ...

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isAuthenticated ? (
          // 已登录，显示主页
          <Stack.Screen name="Home" component={HomeScreen} />
        ) : (
          // 未登录，显示登录页
          <Stack.Screen name="Login" component={LoginScreen} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在登录成功后，可以将新的token和过期时间存储到AsyncStorage中，以便下次使用。同时，需要在每个需要使用token的请求中添加token头部，以确保请求的合法性。