firebase - Vue应用程序中的Firebase登录页面刷新

Question

我正在使用 firebase 作为后端构建一个 vue.js 应用程序。我已经设置了身份验证和路由保护。我还将会话的持久性设置为 firebase.persistance.LOCAL 但是，每当我刷新页面、关闭选项卡或浏览器并返回时，我都会被重定向到登录页面。

这是我的火力基地配置：

import * as firebase from "firebase";

var firebaseConfig = {
  ....
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const storage = firebase.storage();

这是我登录用户的方式：

auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL)
                .then(function() {
                  auth
                    .signInWithEmailAndPassword(self.email, self.password)
                    .then(function() {
                      self.$router.push("/management");
                    })
                    .catch(function(error) {
                      self.errors = error;
                      document.getElementById("signInLoader").style.display =
                        "none";
                    });
                })
                .catch(function(error) {
                  self.errors = error;
                  document.getElementById("signInLoader").style.display =
                    "none";
                });

这是我的路线守卫：

import { auth } from "@/firebase/firebase.js";

Vue.use(VueSpinners);

Vue.config.productionTip = false;

router.beforeEach((to, from, next) => {
  const currentUser = auth.currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next("/signin");
  } else if (requiresAuth && currentUser) {
    next();
  } else {
    next();
  }
});

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount("#app");

标签： firebasevue.jsvuejs2firebase-authenticationvue-router

Answer 1

我更改了 routeguard 以监视身份验证初始化，然后检查 currentUser。

router.beforeEach((to, from, next) => {
    auth.onAuthStateChanged(function(user) {
        const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
        if (!requiresAuth) {
            next()
        } else if (requiresAuth && user) {
            next()
        } else {
            next("/signin");
        }
    });
});