使用Auth0与Google登录时，如何保留URL中的哈希值？

我之前也碰到过一模一样的情况，这不是Google本身的限制，而是浏览器哈希片段的特性加上OAuth2社交登录流程的服务器端重定向导致的——浏览器不会把URL中#后面的部分发送给服务器，所以当Auth0在Google登录完成后触发服务器端重定向时，哈希片段就被丢弃了。不过有几个可靠的解决办法：

方法1：利用Auth0的state参数传递哈希信息 #

OAuth2的state参数本来就是用来在登录流程中保留自定义状态的，它会完整地在整个流程中传递，最终带回你的应用。具体步骤如下：

• 登录前捕获哈希并传入state：在触发Auth0登录前，把当前URL的哈希片段编码后放到state参数里
• 回调时解析state并恢复哈希：当用户登录完成跳转回你的应用时，从state中取出哈希，再重定向到带哈希的目标页面

举个前端代码示例：

触发登录的代码 #

// 捕获当前页面的哈希片段（比如#subtitle）
const targetHash = window.location.hash;

// 把哈希和其他需要保留的状态打包，编码后作为state参数
const statePayload = encodeURIComponent(JSON.stringify({
  targetHash: targetHash,
  // 可以添加其他需要保留的状态，比如原路径等
}));

// 调用Auth0登录，传入自定义state
auth0.loginWithRedirect({
  redirectUri: 'https://mywebsite.com/auth-callback',
  state: statePayload
});

回调页面的处理代码 #

// 从回调URL的查询参数中获取state
const urlParams = new URLSearchParams(window.location.search);
const state = urlParams.get('state');

if (state) {
  try {
    // 解码并解析state内容
    const parsedState = JSON.parse(decodeURIComponent(state));
    if (parsedState.targetHash) {
      // 重定向到带哈希的目标页面
      window.location.href = '/home' + parsedState.targetHash;
    } else {
      // 没有哈希时跳转到默认首页
      window.location.href = '/home';
    }
  } catch (e) {
    // 解析失败时的降级处理
    window.location.href = '/home';
  }
} else {
  window.location.href = '/home';
}

方法2：SPA应用可尝试Auth0哈希模式重定向 #

如果你的应用是单页应用（SPA），可以在Auth0控制台中把应用的重定向模式设置为hash模式。这种模式下，Auth0的回调会把状态信息放到URL的哈希部分，避免服务器端重定向丢失数据。不过这个方法依赖于你的路由配置是否支持哈希模式，灵活性不如第一种方法。

补充说明 #

为什么邮箱密码登录时哈希不会丢失？因为邮箱密码登录是在Auth0的托管登录页面完成的，整个流程基本是客户端跳转，没有经过服务器端的重定向步骤，所以哈希片段一直保留在浏览器地址栏中。而Google登录需要跳转到Google的授权服务器，之后Auth0通过服务器端重定向把用户带回你的应用，这时候哈希就因为不会发送到服务器而丢失了。

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