window.location.href会重置Vue应用？Firebase登录跳转认证异常

你的理解完全正确，核心差异就在这里：

• window.location.href = "/some-other-page" 会触发浏览器重新加载整个Vue应用，相当于创建了一个全新的应用实例。Firebase Auth的用户状态虽然会存在本地存储，但新实例启动时Firebase需要时间去初始化并从本地存储恢复用户会话，这时候你在目标页面直接访问auth.currentUser，大概率还没完成初始化，所以拿到的是undefined。
• 而router.push('/some-other-page')是Vue Router的单页应用跳转，整个应用实例不会被销毁重建，Firebase Auth的用户状态在当前实例中是持续存在的，所以能直接拿到有效的currentUser对象。

优化建议 #

1. 优先使用Vue Router跳转：这是单页应用的标准跳转方式，能避免页面重载带来的状态初始化问题，调整后的代码可以去掉多余的onAuthStateChanged监听，直接在登录成功的回调里跳转：

import { useRouter } from 'vue-router';
// ...
const router = useRouter();

onMounted(() => {
    if (isSignInWithEmailLink(auth, window.location.href)) {
        let email = window.localStorage.getItem('emailForSignIn');
        if (!email) {
            email = window.prompt('Please provide your email for confirmation');
        }
        signInWithEmailLink(auth, email, window.location.href)
            .then((result) => {
                window.localStorage.removeItem('emailForSignIn');
                // 用Vue Router跳转
                router.push('/some-other-page');
            })
            .catch((error) => {
                // 错误处理
            });
    }
    else {
        // 错误处理
    }
});

2. 如果必须使用页面重载跳转：在目标页面不要直接访问auth.currentUser，而是通过onAuthStateChanged监听用户状态的初始化完成事件：

onMounted(() => {
    // 监听用户状态，确保Firebase完成初始化
    const unsubscribe = onAuthStateChanged(auth, (user) => {
        if (user) {
            // 在这里处理已登录的业务逻辑
            console.log(user);
        }
        // 取消监听，防止内存泄漏
        unsubscribe();
    });
});

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