React JS中使用AWS Amplify v3.3.26的Cognito实现社交媒体登录时抑制页面刷新的方法

我之前在使用Amplify 3.x版本时也碰到过一模一样的问题，结合你的代码和版本限制，给你几个可行的解决思路：

1. 彻底拦截表单默认行为 #

虽然你已经加了e.preventDefault()，但有时候事件冒泡或者浏览器的隐性默认行为还是会触发刷新。可以在事件处理函数里再加一行e.stopPropagation()，确保事件不会向上传递触发额外的页面跳转：

const RegWithSocialMedia = (e, social_media) => { 
  e.preventDefault();
  e.stopPropagation(); // 新增这一行，阻止事件冒泡
  Auth.federatedSignIn({ provider: social_media }) 
    .then(cred => { 
      console.log(cred); 
      return Auth.currentAuthenticatedUser(); 
    }) 
    .then(user => { 
      console.log(user); 
    }).catch(e => { 
      console.log(e) 
    }); 
}

2. 调整Amplify OAuth配置，避免自动跳转 #

在Amplify初始化配置里，重点检查oauth部分的参数设置。3.3.26版本中，把responseType设为'token'，同时将redirectSignIn指定为当前页面的URL，并且确保这个URL已经添加到Cognito用户池的允许回调URL列表中：

Amplify.configure({
  Auth: {
    region: '你的AWS区域',
    userPoolId: '你的用户池ID',
    userPoolWebClientId: '你的客户端ID',
    oauth: {
      domain: '你的Cognito域名',
      scope: ['email', 'profile', 'openid'],
      redirectSignIn: window.location.origin, // 当前页面的根URL
      redirectSignOut: window.location.origin,
      responseType: 'token' // 页面内处理授权响应，不触发刷新
    }
  }
});

3. 页面加载时重新获取用户信息（兜底方案） #

如果上面的方法还是没法完全阻止刷新，可以在组件初始化时（比如React的useEffect）主动检查认证状态，这样即使页面刷新，也能重新拉取用户信息：

// 以React为例
useEffect(() => {
  const checkAuthUser = async () => {
    try {
      const user = await Auth.currentAuthenticatedUser();
      console.log('页面刷新后获取的用户信息:', user);
      // 这里可以把用户信息存入状态管理工具或者组件state
    } catch (err) {
      console.log('用户未登录:', err);
    }
  };
  checkAuthUser();
}, []);

重要提醒 #

一定要确保Cognito用户池的允许回调URL和允许注销URL中包含你设置的redirectSignIn地址，否则Cognito会拒绝授权并跳转错误页面。

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