Шаблон для firebase onAuthStateChanged & Navigation Guards - приложение Quasar - PullRequest
Новая
       6

Шаблон для firebase onAuthStateChanged & Navigation Guards - приложение Quasar

0 голосов
/ 14 мая 2018

В моем приложении 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();
    }
  }
});

Ответы [ 2 ]

0 голосов
/ 29 мая 2019

Я использую функцию firebase.auth (). OnAuthStateChanged прямо в моем маршрутизаторе, как это: Я проверяю, нужен ли для маршрута аутентифицированный пользователь (необязательно), а затем загружаю текущего авторизованного пользователя и фиксирую его в своем хранилище Vuex. Таким образом, текущий зарегистрированный пользователь находится в моем состоянии 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

Я использую Квазар. И этот код находится в моем роутере / index.js. Не забудьте импортировать ваш магазин следующим образом: импортировать магазин из '../store'

0 голосов
/ 14 мая 2018

В вашем 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 готов к использованию.

...