Vue3接入Firebase实现注册登录时路由跳转及登录异常问题求助

安全阿岳

2026-9-23

问题排查与修复方案

注册跳转问题修复

你当前注册成功后跳转地址写的是/login，和你要跳转到根路径的需求不符，同时建议调整preventDefault位置避免表单默认提交刷新页面，补充updateProfile的异常捕获：

// 注册页面修复后的register方法
register: function (e) {
  e.preventDefault() // 移到最前，提前阻止表单默认提交
  const auth = getAuth();
  createUserWithEmailAndPassword(auth, this.form.email, this.form.password)
    .then((userCredential) => {
      return userCredential.user.updateProfile({
        displayName: this.form.email,
      })
    })
    .then(() => {
      alert("User successfully registered!");
      this.$router.push("/"); // 改成跳根路径
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(errorCode, errorMessage);
      // 可在这里加前端错误提示，方便用户感知问题
    });
}

登录异常+跳转问题修复

核心错误是你错误调用了userCredential.$router，Firebase返回的用户凭证对象不存在$router属性，直接触发JS报错导致逻辑中断，同时冗余写了两次跳转逻辑，修复如下：

// 登录页面修复后的login方法
login: function (e) {
  e.preventDefault()
  const auth = getAuth();
  signInWithEmailAndPassword(auth, this.user.email, this.user.password)
    .then((userCredential) => {
      // 直接通过组件实例的$router跳转即可
      this.$router.replace("/");
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(errorCode, errorMessage);
      // 可在这里加前端错误提示，比如密码错误、账号不存在等
    });
}