Как решить проблему с перезагрузкой аутентификации при перезагрузке страницы, Firebase и Vuejs - PullRequest
Новая
       22

Как решить проблему с перезагрузкой аутентификации при перезагрузке страницы, Firebase и Vuejs

0 голосов
/ 02 апреля 2019

В настоящее время, когда я перезагружаю панель мониторинга, сначала ее перенаправляют в / login, затем / dashboard, если пользователь уже вошел в систему. Выглядит довольно проволочно. Как я могу исправить это так, чтобы его приземлился прямо на / панель, если пользователь вошел в систему.

Созданная функция в 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 

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

Вот полная конфигурация маршрутизатора, 

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;

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Я не знаю, как вы настраиваете и экспортируете Firebase, но я думаю, что вы должны изменить код своего маршрутизатора следующим образом (см. Комментарии в коде): 

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();
    }
});
0 голосов
/ 02 апреля 2019

Я сделал ошибку для инициализации экземпляра vue, нашел решение от https://medium.com/@anas.mammeri/vue-2-firebase-how-to-build-a-vue-app-with-firebase-authentication-system-in-15-minutes-fdce6f289c3c

...