firebase onAuthStateChanged 和 Navigation Guards 的模式 - Quasar 应用

Question

我的 Quasar 应用程序中遇到了有关浏览器刷新和 Firebase 身份验证的问题。

在用户登录并点击浏览器刷新后，firebase.auth().currentUser 返回 null（因为它是异步执行的）。这意味着当 beforeEach 被执行时，currentUser 为空并且用户被提示登录页面。但是我看到当 onAuthStateChanged 的​​回调被调用时，用户被正确设置。

在 Quasar 应用程序中，是否有任何模式可以在导航过程中使用 onAuthStateChanged 以便重用现有用户会话？

// Vue-router => index.js

firebase.auth().onAuthStateChanged(user => {
  console.log('onAuthStateChanged Invoked => ' + user);
});

router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser; 
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) {
    next('signin');
  } else {
    if (requiresAuth && currentUser.emailVerified === false) {
      next('signin');
    } else {
      next();
    }
  }
});

Answer 1

在你的身边main.js，你应该倾听onAuthStateChange。

import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase'

Vue.config.productionTip = false

let app;
let config = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SEND_ID"
};

firebase.initializeApp(config)
firebase.auth().onAuthStateChanged(function(user) {
  if (!app) {
    /* eslint-disable no-new */
    app = new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      router
    })
  }
});

仅当我们确定 Firebase Auth 对象可供使用时，我们才会初始化应用程序。