下面是一个使用React、API网关和Cognito实现安全存储访问令牌的解决方案的代码示例。

1. 首先，在React应用程序的根组件中，你可以使用useEffect钩子来初始化Cognito。

import React, { useEffect } from 'react';
import { Auth } from 'aws-amplify';

function App() {
  useEffect(() => {
    Auth.configure({
      // Cognito 配置
      region: 'YOUR_COGNITO_REGION',
      userPoolId: 'YOUR_USER_POOL_ID',
      userPoolWebClientId: 'YOUR_USER_POOL_WEB_CLIENT_ID',
      identityPoolId: 'YOUR_IDENTITY_POOL_ID',
    });
  }, []);

  // ...
}

2. 当用户登录后，你可以使用Auth.signIn方法来获取访问令牌。

import { Auth } from 'aws-amplify';

// ...

async function handleLogin() {
  try {
    const user = await Auth.signIn('username', 'password');
    const accessToken = user.signInUserSession.accessToken.jwtToken;
    
    // 将访问令牌存储在本地存储中（例如localStorage）
    localStorage.setItem('accessToken', accessToken);
  } catch (error) {
    console.log('登录失败', error);
  }
}

3. 然后，在发出API请求时，你可以从本地存储中获取访问令牌，并将其作为请求标头的一部分发送给API网关。

import axios from 'axios';

// ...

async function fetchData() {
  try {
    const accessToken = localStorage.getItem('accessToken');
    
    const response = await axios.get('YOUR_API_ENDPOINT', {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });
    
    console.log('API响应', response.data);
  } catch (error) {
    console.log('API请求失败', error);
  }
}

通过这种方式，你可以安全地存储访问令牌，并将其用于与API网关的安全通信。