AWS Cognito用户登录后如何解析JWT Token并获取access_token

一、如何感知重定向返回的access_token #

你当前用的是OAuth2隐式授权流，Cognito登录完成后会带着token直接跳转回你的站点，页面会触发重新加载，不需要额外的事件监听，直接在页面初始化阶段读取URL的hash片段即可，也不需要强制使用前端路由、async/await，原生JS即可实现：

实现代码 #

// 页面加载完成后立即执行
window.addEventListener('load', () => {
  // 去掉hash开头的#号
  const hashContent = window.location.hash.slice(1);
  if (!hashContent) return;

  // 解析hash中的参数
  const hashParams = new URLSearchParams(hashContent);
  const accessToken = hashParams.get('access_token');
  const expiresIn = hashParams.get('expires_in');

  if (accessToken) {
    // 将token和过期时间存入本地存储，sessionStorage安全性更高，关闭浏览器即清除
    sessionStorage.setItem('cognito_access_token', accessToken);
    const expireTimestamp = Date.now() + Number(expiresIn) * 1000;
    sessionStorage.setItem('cognito_token_expire', expireTimestamp.toString());

    // 可选：清除地址栏中的token参数，优化用户体验同时避免token泄露
    window.history.replaceState({}, document.title, window.location.pathname);
  }
});

关于前端路由的说明 #

如果你使用的是React/Vue等单页应用框架：

• 如果用hash模式路由，注意在路由初始化前先执行上述token解析逻辑，避免路由匹配异常
• 推荐切换为history模式路由，完全避免和Cognito返回的hash参数冲突

二、如何使用token请求DynamoDB #

禁止直接在前端代码中配置AWS永久密钥调用DynamoDB，会导致密钥泄露，数据库被恶意操作，推荐以下两种安全方案：

方案1：API Gateway + Lambda 代理（推荐） #

这是最常用的安全实现方案：

1. 新增API Gateway接口，开启Cognito用户池授权校验
2. 后端绑定Lambda函数，在Lambda中配置有权限操作DynamoDB的IAM角色
3. 前端请求时将access_token放在请求头中即可，API Gateway会自动校验token合法性，校验通过才会转发请求到Lambda操作DynamoDB

请求示例代码：

async function requestDynamoDB(postData) {
  const accessToken = sessionStorage.getItem('cognito_access_token');
  const expireTime = Number(sessionStorage.getItem('cognito_token_expire'));

  // token不存在或已过期，跳转登录
  if (!accessToken || Date.now() > expireTime) {
    window.location.href = '你的Cognito登录地址';
    return;
  }

  try {
    const response = await fetch('你的API Gateway接口地址', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(postData)
    });
    return await response.json();
  } catch (error) {
    console.error('请求失败：', error);
  }
}

方案2：Cognito身份池颁发临时凭证 #

如果你不想搭建API Gateway和Lambda，可以使用Cognito身份池：

1. 配置Cognito身份池，将你的用户池设置为身份提供者
2. 为身份池的认证用户角色配置DynamoDB的操作权限
3. 前端拿到access_token后，调用AWS SDK换取临时AWS凭证，再用临时凭证调用DynamoDB
4. 临时凭证有自动过期时间，权限可控，安全性远高于直接使用永久密钥

内容的提问来源于stack exchange，提问作者田伯清