如何在React Native Image组件中使用授权令牌

有两种常见方式可以给Image组件的请求附加授权令牌，下面分别说明：

1. 附加到URL参数（不推荐） #

直接把令牌作为查询参数拼在图片URL后面，实现起来最简单，但安全性低（令牌会暴露在URL中，容易被日志记录或泄露），还可能影响图片缓存（URL变化会导致重新请求）。

示例代码：

import React from 'react';
import { Image } from 'react-native';

const MyComponent = () => {
  const authToken = 'myAuthorizationToken';
  const imageUrl = `https://example.com/image.jpg?authToken=${authToken}`;

  return (
    <Image
      source={{ uri: imageUrl }}
      style={{ width: 200, height: 200 }}
    />
  );
};

export default MyComponent;

2. 通过请求头传递（推荐） #

React Native的Image组件支持在source对象中添加headers字段，把授权令牌放在请求头里，这是更安全、规范的做法。通常会用Authorization头，格式一般为Bearer <令牌>（具体格式需匹配API要求）。

示例代码：

import React from 'react';
import { Image } from 'react-native';

const MyComponent = () => {
  const authToken = 'myAuthorizationToken';

  return (
    <Image
      source={{ 
        uri: 'https://example.com/image.jpg',
        headers: {
          Authorization: `Bearer ${authToken}`
          // 如果API要求直接传令牌，可改为：
          // Authorization: authToken
        }
      }}
      style={{ width: 200, height: 200 }}
    />
  );
};

export default MyComponent;

注意事项 #

• 确认API要求的授权头格式：有些API可能不需要Bearer前缀，直接传递令牌字符串即可，需和后端文档对齐。
• 缓存问题：如果令牌过期或更新后，图片可能显示旧缓存，可在URL后加随机参数（如时间戳）强制刷新：https://example.com/image.jpg?t=${Date.now()}。
• 版本兼容：确保你的React Native版本支持自定义请求头特性（RN 0.40+基本都支持）。

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