React Native带Auth Token的Image组件如何处理401错误？

方案一：封装基于Axios的图片加载组件 #

直接复用你已有的Axios拦截器逻辑，先通过Axios请求图片资源，再将数据转为Image可识别的格式，完全复用token刷新、请求排队机制：

import React, { useState, useEffect } from 'react';
import { Image } from 'react-native';
import axios from './your-axios-instance'; // 导入配置好拦截器的Axios实例

const AuthImage = ({ uri, style }) => {
  const [imageSource, setImageSource] = useState(null);

  useEffect(() => {
    const fetchImage = async () => {
      try {
        const response = await axios.get(uri, {
          responseType: 'blob',
        });
        // 转成base64格式供Image组件使用
        const base64 = await new Promise((resolve) => {
          const reader = new FileReader();
          reader.onloadend = () => resolve(reader.result);
          reader.readAsDataURL(response.data);
        });
        setImageSource({ uri: base64 });
      } catch (error) {
        console.error('图片加载失败:', error);
      }
    };

    fetchImage();
  }, [uri]);

  if (!imageSource) {
    // 返回加载占位图
    return <Image source={require('./placeholder.png')} style={style} />;
  }

  return <Image source={imageSource} style={style} />;
};

export default AuthImage;

方案二：利用Image组件的onError回调处理401 #

通过监听Image的错误事件，捕获401状态后手动刷新token并重试：

import React, { useState, useRef } from 'react';
import { Image } from 'react-native';
import { refreshToken } from './your-auth-service'; // 你的token刷新方法
import { getAuthToken, setAuthToken } from './your-token-storage'; // token存储方法

const AuthImage = ({ uri, style }) => {
  const [authToken, setLocalAuthToken] = useState(null);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const retryCount = useRef(0);

  // 初始化获取当前token
  React.useEffect(() => {
    const init = async () => {
      const token = await getAuthToken();
      setLocalAuthToken(token);
    };
    init();
  }, []);

  const handleError = async (error) => {
    const isUnauthorized = error.nativeEvent.statusCode === 401;
    // 限制重试次数，避免死循环
    if (isUnauthorized && retryCount.current < 1) {
      retryCount.current += 1;
      if (!isRefreshing) {
        setIsRefreshing(true);
        try {
          const newToken = await refreshToken();
          await setAuthToken(newToken);
          setLocalAuthToken(newToken);
        } catch (refreshError) {
          console.error('Token刷新失败:', refreshError);
          // 刷新失败可跳转登录页
        } finally {
          setIsRefreshing(false);
        }
      }
    }
  };

  if (!authToken) {
    return <Image source={require('./placeholder.png')} style={style} />;
  }

  return (
    <Image
      source={{
        uri,
        headers: { Authorization: `Bearer ${authToken}` },
      }}
      style={style}
      onError={handleError}
    />
  );
};

export default AuthImage;

注意：需要通过isRefreshing状态避免多组件重复触发token刷新，同时限制重试次数防止异常循环。

可选库方案 #

可以使用react-native-auth-image这类专门处理带认证图片的库，它内置了token刷新和重试逻辑，需评估是否适配你的OAuth2流程。

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