如何解决页面重新加载，Firebase和Vuejs上身份验证的重新加载问题

Question

Currently when I reload dashboard first its redirect to /login then /dashboard if user already login. Its look quite wired. How Can I fix so that its land directly to /dashboard if user logged in.

Created function in main.js

created: function() {

    try {
      firebase.initializeApp(firebaseConfig);
    }
    catch(error){
      return;
    }
    const store = this.$store;
    firebase.auth().onAuthStateChanged(function(user){

      if(typeof user !== 'undefined' && user !== null){
        store.dispatch('loginUserOnLoad', user);
      }
    });
  }

LoginUserOnlOad action

loginUserOnLoad: function({ commit }, user){
        commit('authUser',{
            email: user.email,
            fullname: 'Guest'
        })
    },

Here is complete router configuration,

Vue.use(Router);

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Welcome',
            component: Welcome
        },
        {
            path: '/tasks',
            name: 'Tasks',
            component: Layout,
            meta: {
                requireAuth: true
            }
        },
        {
            path: '/login',
            name: 'Login',
            component: Signin,
            meta: {
                guestAuth: true
            }
        },
        {
            path: '/register',
            name: 'Signup',
            component: Signup,
            meta: {
                guestAuth: true
            }
        },
        {
            path: '*',
            name: 'NotFound',
            component: NotFound
        }
    ]
});


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

    const currentUser = firebase.auth.currentUser;


    const requireAuth = to.matched.some(record => record.meta.requireAuth);

    if(requireAuth && !currentUser){
        next({ name: 'Login'});
    }
    else if(!requireAuth && currentUser){
        next({ name: 'Tasks'});
    }
    else {
        next();
    }
});

export default router;

Answer 1

I don't know how you configure and export Firebase, but I think that you should modify your router code as follows (see comments in the code):

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

    //Instead of     const currentUser = firebase.auth.currentUser;  do
    const currentUser = firebase.auth().currentUser;

    const requireAuth = to.matched.some(record => record.meta.requireAuth);

    if(requireAuth && !currentUser){
        next({ name: 'Login'});
    }
    else if(!requireAuth && currentUser){
        next({ name: 'Tasks'}); 
    }
    else {
        next();
    }
});

Answer 2

我在初始化vue实例时犯了一个错误，我从https://medium.com/@anas.mammeri/vue-2-firebase-how-to-build-a-vue-app-with-firebase-authentication-找到了解决方案系统级15分钟，fdce6f289c3c