基于Firebase实现Google登录后从登录页跳转至首页的问题咨询

核心修改点 #

你当前的代码已经完成了Google身份校验、用户信息本地存储的逻辑，仅需要在登录成功的回调中补充页面跳转逻辑即可，以下是不同场景下的实现方式：

1. 原生JavaScript场景 #

直接在signInWithPopup的成功回调末尾添加页面跳转代码即可，修改后的signInWithGoogle函数如下：

export const signInWithGoogle = () => {
  signInWithPopup(auth, provider)
    .then((result) => {
      const name = result.user.displayName;
      const userid = result.user.uid;
      const email = result.user.email;
      const profilePic = result.user.photoURL;

      localStorage.setItem("name", name);
      localStorage.setItem("email", email);
      localStorage.setItem("userid", userid);
      localStorage.setItem("profilePic", profilePic);
      
      // 新增跳转逻辑，替换为你的首页实际地址即可
      window.location.href = "/index.html";
      // 如果是根路径首页可以写成 window.location.href = "/"
    })
    .catch((error) => {
      console.log(error);
    });
};

额外优化：登录页自动判断登录状态 #

可以在登录页初始化时添加Firebase Auth状态监听，如果用户已经登录过直接跳首页，避免重复登录：

import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./你的firebase配置文件路径";

// 登录页初始化时执行
onAuthStateChanged(auth, (user) => {
  if (user) {
    // 用户已登录直接跳首页
    window.location.href = "/index.html";
  }
});

2. 前端框架场景 #

如果使用React、Vue等前端框架，替换跳转逻辑为框架内置的路由跳转方法即可：

• React（React Router v6+）：
  先导入useNavigate，成功后执行navigate('/home')
• Vue（Vue Router v4+）：
  先导入useRouter，成功后执行router.push('/home')

注意事项 #

• 首页加载时建议增加登录状态校验，读取localStorage或调用onAuthStateChanged判断用户是否登录，未登录用户自动跳转回登录页
• 不要直接依赖localStorage做身份校验，敏感接口请求需要携带Firebase Auth返回的ID Token做后端校验

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