登录后如何从Firebase Auth读取自定义参数？

首先明确：getRedirectResult方法本身不会直接返回你通过setCustomParameters设置的自定义state参数，但可以通过两种方式实现你的需求：

方案一：用本地存储临时保存state #

这是最简单直接的方式，在发起登录跳转前把需要传递的state存到本地存储，登录完成后再取出使用：

登录跳转前的代码： #

// 先把要传递的state存到localStorage
const targetAction = 'saveAction';
localStorage.setItem('auth_redirect_action', targetAction);

// 初始化Google登录提供者并发起跳转
const provider = new GoogleAuthProvider()
provider.setCustomParameters({
  prompt: 'select_account',
})
await signInWithRedirect(getAuth(), provider)

登录完成后读取state的代码： #

const result = await getRedirectResult(getAuth());
if (result) {
  // 从本地存储取出之前保存的state
  const savedAction = localStorage.getItem('auth_redirect_action');
  if (savedAction === 'saveAction') {
    // 在这里执行用户原本要完成的操作，比如保存数据等
  }
  // 用完后记得删除，避免下次登录重复触发
  localStorage.removeItem('auth_redirect_action');
}

方案二：通过URL的state参数传递（需自行编码解析） #

OAuth流程本身的state参数主要用于防CSRF，但你可以把自定义数据编码后塞进这个参数里，登录完成后从URL中解析出来：

登录跳转前的代码： #

// 把自定义state编码成字符串（这里用base64，也可以用其他方式）
const customState = btoa(JSON.stringify({ action: 'saveAction' }));

const provider = new GoogleAuthProvider()
provider.setCustomParameters({
  prompt: 'select_account',
  state: customState, // 把编码后的自定义数据传入state参数
})
await signInWithRedirect(getAuth(), provider)

登录完成后读取state的代码： #

// 从当前URL的查询参数里取出state
const urlParams = new URLSearchParams(window.location.search);
const encodedState = urlParams.get('state');

if (encodedState) {
  // 解码并解析自定义数据
  const customState = JSON.parse(atob(encodedState));
  if (customState.action === 'saveAction') {
    // 执行对应的后续操作
  }
  // 可以清除URL里的state参数，让页面URL更干净
  urlParams.delete('state');
  window.history.replaceState({}, document.title, `${window.location.pathname}${urlParams.toString() ? `?${urlParams.toString()}` : ''}`);
}

注意：方案二需要注意state参数的长度限制，不同OAuth服务商的限制可能不同，不适合传递大量数据；另外编码解码要统一，避免出现解析错误。

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