firebase onAuthStateChanged的模式&；导航卫士-类星体应用程序

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

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

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

//Vue路由器=>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();
    }
  }
});

---

在

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
    })
  }
});

从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
从“firebase”导入firebase
Vue.config.productionTip=false
让应用程序；
让配置={
apiKey：“你的API密钥”，
authDomain:“您的\u项目\u ID.firebaseapp.com”，
数据库URL:“https://YOUR_PROJECT_ID.firebaseio.com",
projectId:“你的项目ID”，
storageBucket:“您的\u项目\u ID.appspot.com”，
messagingSenderId:“您的邮件发送ID”
};
firebase.initializeApp（配置）
firebase.auth（）.onAuthStateChanged（函数（用户）{
如果（！应用程序）{
/*eslint禁用无新*/
app=新Vue({
el:“#应用程序”，
模板：“”，
组件：{App}，
路由器
})
}
});

只有在确定Firebase Auth对象已准备好使用时，我们才初始化应用程序。

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

...

Router.beforeEach((to, from, next) => {

  let requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  // If route requires auth --> load auth state first from firebase
  if (requiresAuth) {

    firebase.auth().onAuthStateChanged(user => {

      store.commit("user/SET_USER", user);

      let currentUser = firebase.auth().currentUser
      store.commit("user/SET_USER_FULL", currentUser);

      user.getIdToken().then(token => {
        store.commit("user/SET_TOKEN", token)
      });

      if (!user) next('login')
      else next();
    });

  } else next()

})


export default Router

---

我使用类星体。这段代码在我的router/index.js中。别忘了像这样导入您的存储：从“../store”导入存储

谢谢。我早些时候看到过这个建议。然而，在Quasar应用程序中，初始化似乎是由框架完成的。我（在VueJS论坛-）找到了一个解决方案，用Promise包装

firebase.auth（）.currentUser

，然后使用Promise解析在每个

之前执行
中的逻辑，这似乎是可行的。这段代码只是放在一个Quasar引导文件中。