Firebase signInWithRedirect()无法保留Vue路由参数问题

问题出在signInWithRedirect的机制上——这个方法会让页面跳转到谷歌授权页面，授权完成后再重定向回你的应用，整个过程会导致页面重新加载。而Vue Router的params参数是基于路由跳转的内存状态，页面刷新后，原来的$route.params就会丢失，所以你在获取重定向结果后拿不到price参数。

以下是两种可行的解决方案：

方案一：用本地存储暂存参数 #

进入Sign Up页面时，先把路由参数存入本地存储，等登录重定向回来后再读取并使用，用完清理避免残留：

修改Sign Up组件的mounted钩子：

mounted: function () {
    // 进入页面时先保存参数到本地存储
    if (this.$route.params.price) {
      localStorage.setItem('selectedPrice', this.$route.params.price);
    }

    const googleAuth = new firebase.auth.GoogleAuthProvider();
    if (!this.loggedIn) {
      firebase.auth().signInWithRedirect(googleAuth);
      firebase
        .auth()
        .getRedirectResult()
        .then((result) => {
          // 从本地存储取出参数
          const price = localStorage.getItem('selectedPrice');
          this.$router.push({ name: "Checkout", params: { price: price } });
          // 用完删除，防止残留
          localStorage.removeItem('selectedPrice');
          console.log(result);
        })
        .catch((error) => {
          console.log(error);
          // 出错也清理残留
          localStorage.removeItem('selectedPrice');
        });
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.loggedIn = true;
        } else {
          // 显示登录界面
        }
      });
    }
  },

方案二：改用Query参数传递 #

query参数会直接附加在URL上，页面刷新后依然存在，不需要额外存储：

1. 修改定价页面的subscribe方法，改用query传递参数：

methods: {
    subscribe(price) {
      this.loading = true;
      if (!this.loggedIn) {
        this.$router.push({ name: "Sign Up", query: { price: price } });
      }
    },
  },

2. 修改Sign Up组件的mounted钩子，读取query参数并传递给Checkout：

mounted: function () {
    const googleAuth = new firebase.auth.GoogleAuthProvider();
    if (!this.loggedIn) {
      firebase.auth().signInWithRedirect(googleAuth);
      firebase
        .auth()
        .getRedirectResult()
        .then((result) => {
          this.$router.push({ name: "Checkout", query: { price: this.$route.query.price } });
          console.log(result);
        })
        .catch((error) => {
          console.log(error);
        });
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.loggedIn = true;
        } else {
          // 显示登录界面
        }
      });
    }
  },

方案对比 #

• 方案一：参数不会暴露在URL中，适合敏感或不想公开的参数，但需要手动处理本地存储的读写和清理。
• 方案二：实现更简单，无需额外存储操作，但参数会显示在URL上，适合非敏感参数。

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