基于AWS Amplify的React Native Expo Spotify克隆App调用GraphQLAPI无凭证错误

问题背景 #

用AWS Amplify开发的Spotify克隆App此前运行正常，现在调用GraphQL API时返回无凭证相关错误。

Schema.graphql #

type AlbumCategory @model {
  id: ID!
  title: String!
  albums: [Album] @connection(keyName: "byAlbumCategory", fields: ["id"])
}

type Album @model @key(name: "byAlbumCategory", fields: ["albumCategoryId"]) {
  id: ID!
  name: String!
  by: String!
  numberOfLikes: Int!
  imageUri: String!
  artistsHeadline: String!

  songs: [Song] @connection(keyName: "byAlbum", fields: ["id"])

  albumCategoryId: ID!
  albumCategory: AlbumCategory @connection(fields: ["albumCategoryId"])
}

type Song @model @key(name: "byAlbum", fields: ["albumId"]) {
  id: ID!
  imageUri: String!
  uri: String!
  title: String!
  artist: String!

  albumId: ID!
  album: Album @connection(fields: ["albumId"])
}

查询语句 #

export const listAlbumCategorys = /* GraphQL */ `
  query ListAlbumCategorys(
    $filter: ModelAlbumCategoryFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listAlbumCategorys(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        title
        albums {
          nextToken
        }
        createdAt
        updatedAt
      }
      nextToken
    }
  }
`;

调用查询的函数 #

useEffect(() => {
    const fetchAlbumCategories = async () => {
      try {
        const data = await API.graphql(graphqlOperation(listAlbumCategorys));
        console.log(data);
      } catch (e) {
        console.log("错误:", e);
      }
    };

    fetchAlbumCategories();
  }, []);

错误信息 #

警告 [WARN] 48:05.339 GraphQLAPI - 凭证验证错误：未提供用于未认证访问的Cognito身份池
日志 错误：[错误：无凭证]

排查与解决方法 #

• 检查Amplify配置文件
  确认项目根目录的aws-exports.js中是否存在正确的aws_cognito_identity_pool_id配置项，且未设置禁用未认证访问的参数。
• 更新认证配置
  运行命令amplify update auth，在交互配置中确保开启了未认证用户访问权限（如果你的App允许未登录用户访问API），之后执行amplify push重新部署配置。
• 验证API权限
  登录AWS Amplify控制台，找到对应的GraphQL API，进入「权限」设置，检查listAlbumCategorys查询的权限规则是否允许未认证用户访问，或者确认当前用户已完成登录认证。
• 强制刷新凭证
  在调用API前添加凭证刷新逻辑，确保Amplify能获取到有效凭证：

  import { Auth } from 'aws-amplify';
  
  useEffect(() => {
    const fetchAlbumCategories = async () => {
      try {
        // 先刷新获取凭证
        await Auth.currentCredentials();
        const data = await API.graphql(graphqlOperation(listAlbumCategorys));
        console.log(data);
      } catch (e) {
        console.log("错误:", e);
      }
    };
  
    fetchAlbumCategories();
  }, []);
  

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