Firebase邮箱认证含#的URL无法正常重定向问题求助

你遇到的问题是Firebase对包含#的URL处理逻辑导致的：Firebase会把#视为URL的锚点分隔符，生成认证链接时会将apiKey等查询参数直接附加在#之前，而浏览器加载时只会解析#之前的部分作为路径，最终导致你的哈希路由被忽略，直接跳转到根路径。

下面给两种可行的解决方法：

方法一：URL编码哈希符号 #

把actionCodeSettings中的url参数里的#替换为URL编码后的%23，这样Firebase会将其当作URL的一部分而非锚点，生成的链接能正确保留哈希路由结构：

let actionCodeSettings = {
    url: "http://localhost:8005/%23/auth",
    handleCodeInApp: true,
}

点击邮件链接后，浏览器会自动将%23解码为#，最终跳转到http://localhost:8005/#/auth?apiKey=<your_key>&...，此时你的哈希路由系统可以正常识别/auth路径，同时你也能通过window.location.search获取Firebase的认证参数。

方法二：根路径中转处理认证参数 #

如果编码方式不符合你的需求，可以在根路径页面做中转，手动跳转到哈希路由页面：

1. 先把actionCodeSettings的url设为应用根路径：

let actionCodeSettings = {
    url: "http://localhost:8005/",
    handleCodeInApp: true,
}

2. 在应用的根入口页面（比如index.html对应的初始化脚本）中，检测URL中的Firebase认证参数，携带参数跳转到哈希路由页面：

// 页面加载时执行
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('mode') && urlParams.has('oobCode')) {
    const paramsStr = urlParams.toString();
    window.location.href = `http://localhost:8005/#/auth?${paramsStr}`;
}

3. 在#/auth页面中，解析锚点里的参数完成认证：

// 哈希路由页面内执行
const hashPart = window.location.hash.slice(1); // 得到 "/auth?mode=xxx&oobCode=xxx"
const [route, paramsStr] = hashPart.split('?');
const authParams = new URLSearchParams(paramsStr);

const mode = authParams.get('mode');
const oobCode = authParams.get('oobCode');
// 调用Firebase的applyActionCode等方法完成认证流程

这两种方法都能解决哈希路由下的重定向问题，你可以根据自己的路由架构选择合适的方案。

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