Firebase 身份验证。 更新所有项目文件

Question

The project is developed by client-side firebase and vue. When user login successfully, my authService updated in login component. But same object did not update in router. authService is used in Login component and AdminNavbar component.In my opinion, at each login and logout event, onAuthStateChanged methode will update user variable. This is working on Login component, but not working on router. For this reason app always redirect to login page.

firebase and authService side code is shared below:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

const firebaseConfig = {
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

const initializeAuth = new Promise(resolve => {
  firebase.auth().onAuthStateChanged(user => {
    authService.setUser(user);
    resolve(user);
    console.log(user); 
  })
})

const authService = {

  user: null,

  authenticated () {
    return initializeAuth.then(user => {
      return user && !user.isAnonymous
    })
  },

  setUser (user) {
    this.user = user
  },

  login (email, password) {
    firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION).then(function() {
      firebase.auth().signInWithEmailAndPassword(email, password)
    }).catch(function(error) {
      console.log(error);
    });
  },

  logout () {
    firebase.auth().signOut().then(() => {
      console.log('logout done')
    })
  }
}

export const db = firebaseApp.database();
export const hadithRef = db.ref('hadith');
export default authService;

router side code is shared below:

import Vue from "vue";
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// import components
import authService from './firebase.js';

const router = new VueRouter({
    mode: 'history',
    routes: [
      // this part is included path, name, components
    ]
});

router.beforeEach((to, from, next) => {
    // when user is login, user variable still is null. But same time user variable is not null in login component.
    // user is null at this point.
    console.log(authService.user);
    if (to.path == '/hadith/query' && authService.user == null) next({ path: '/login' })
    else if (to.path == '/hadith/add' && authService.user == null) next({ path: '/login' })
    else if (to.path == '/hadith/update' && authService.user == null) next({ path: '/login' })
    else next()
});

export default router;

main.js code is shared below:

import Vue from 'vue'
import '@babel/polyfill'
import 'mutationobserver-shim'
import './plugins/bootstrap-vue';
import './plugins/vuefire';

Vue.config.productionTip = false;

import App from './App.vue';
import router from './plugins/hrouter';

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

Answer 1

Solution is this link . As sharing below, we should use vuex and it's states setting in onAuthStateChanged observer method. At the same time we make persist to states of vuex. You can view my github repo .

modify onAuthStateChanged methode in your firebase file:

import store from '../store/index';
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    store.dispatch('setUser', null);
  } else {
    store.dispatch('setUser', null);
  }
});

Also we install the vuex-persistedstate for persisted states:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import createPersistedState from "vuex-persistedstate";
export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    user: null
  },
    getters:{
      getUser: state => {
          return state.user;
      }
    },
  mutations: {
    setUser(state, user){
      state.user = user;
    }
  },
  actions: {
    setUser(context, user){
        context.commit('setUser', user);
    },
  }
})