如何通过useAuthenticator或让AWS Amplify自动获取API.graphql()的authToken？

一、通过useAuthenticator获取ID Token #

你可以直接用Amplify提供的useAuthenticator hook获取当前用户的会话信息，进而拿到ID Token，不需要单独调用Auth.currentSession()：

import { useAuthenticator } from '@aws-amplify/ui-react';
import { API, GRAPHQL_AUTH_MODE } from 'aws-amplify';
import { GraphQLQuery } from '@aws-amplify/api-graphql';
import { quries } from './your-queries-file'; // 替换成你的查询文件路径
import { ListTodosQuery } from './your-types-file'; // 替换成你的类型定义路径
import { useEffect } from 'react';

function YourComponent() {
  const { user } = useAuthenticator();

  useEffect(() => {
    const fetchTodos = async () => {
      if (!user) return; // 用户未登录时跳过

      const token = user.signInUserSession.getIdToken().getJwtToken();
      const allTodos = await API.graphql<GraphQLQuery<ListTodosQuery>>({
        query: quries.listTodos,
        authMode: GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS,
        authToken: token,
      });
      console.log(allTodos);
    };

    fetchTodos();
  }, [user]); // 依赖user，用户状态变化时重新请求

  // 组件其他内容...
}

useAuthenticator返回的user对象包含完整的会话信息，当用户登录状态变化（比如登录/登出）时，user会自动更新，触发useEffect重新执行。

二、让Amplify自动注入令牌（推荐） #

只要你的Amplify配置正确（已关联Cognito用户池和AppSync，且AppSync的认证方式设为Cognito用户池），完全不需要手动传递authToken参数——Amplify会自动从当前活跃的用户会话中获取并注入令牌。

修改后的代码可以简化成这样：

import { API, GRAPHQL_AUTH_MODE } from 'aws-amplify';
import { GraphQLQuery } from '@aws-amplify/api-graphql';
import { quries } from './your-queries-file';
import { ListTodosQuery } from './your-types-file';
import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    const fetchTodos = async () => {
      try {
        const allTodos = await API.graphql<GraphQLQuery<ListTodosQuery>>({
          query: quries.listTodos,
          authMode: GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS,
          // 不再需要手动传authToken！
        });
        console.log(allTodos);
      } catch (err) {
        console.error('请求失败:', err);
      }
    };

    fetchTodos();
  }, []);

  // 组件其他内容...
}

关键配置前提 #

确保你的Amplify项目满足以下条件：

• 已通过amplify add auth配置Cognito用户池
• 已通过amplify add api配置AppSync，并选择Cognito用户池作为认证方式
• 前端初始化Amplify时，正确导入了aws-exports.js（amplify push生成的配置文件）

如果是手动配置Amplify，需确保配置对象包含：

import { Amplify } from 'aws-amplify';

Amplify.configure({
  Auth: {
    userPoolId: 'YOUR_USER_POOL_ID',
    userPoolWebClientId: 'YOUR_USER_POOL_WEB_CLIENT_ID',
  },
  API: {
    graphql_endpoint: 'YOUR_APPSYNC_ENDPOINT',
    defaultAuthMode: 'AMAZON_COGNITO_USER_POOLS' // 设置默认认证模式，调用时可省略authMode参数
  }
});

若设置了defaultAuthMode，调用可以进一步简化：

const allTodos = await API.graphql<GraphQLQuery<ListTodosQuery>>({
  query: quries.listTodos
});

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