Question

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

用户登录然后单击浏览器刷新后，firebase.auth（）。currentUser将返回null（因为它以异步方式执行）。这意味着当执行beforeEach时，currentUser为null，并且系统会提示用户使用登录页面。但是我看到，当调用onAuthStateChanged的回调时，用户正确设置。

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

// Vue-router =＆gt; 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对象可以使用时才初始化应用程序。

Answer 2

我直接在路由器防护中使用firebase.auth（）。onAuthStateChanged函数，如下所示：我检查路由是否需要经过身份验证的用户（可选），然后加载当前登录的用户并将其提交到我的Vuex存储中。这样，当前的已登录用户在路由防护检查访问权限之前处于我的Vuex状态。否则，尤其是在页面重新加载后，用户尚未加载，并且防护程序将重定向到登录页面...

  ...

Router.beforeEach（（to，from，next）=> {

  让requireAuth = to.matched.some（record => record.meta.requiresAuth）

  //如果路由需要身份验证->首先从Firebase加载身份验证状态
  如果（requiresAuth）{

    firebase.auth（）。onAuthStateChanged（user => {

      store.commit（“用户/ SET_USER”，用户）;

      让currentUser = firebase.auth（）。currentUser
      store.commit（“ user / SET_USER_FULL”，currentUser）;

      user.getIdToken（）。then（令牌=> {
        store.commit（“用户/ SET_TOKEN”，令牌）
      }）;

      如果（！user）next（'login'）
      否则next（）;
    }）;

  } else next（）

}）


导出默认路由器

我使用类星体。这段代码在我的router / index.js中。不要忘记像这样导入您的商店：从“ ../store”导入商店

firebase onAuthStateChanged＆amp;的模式导航卫兵 - Quasar app

2 个答案: