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

【问题标题】：How to fix reloading issue of authentication on page reload reload, Firebase and Vuejs如何解决页面重新加载重新加载、Firebase 和 Vuejs 上的身份验证重新加载问题
【发布时间】：2019-08-24 02:15:03
【问题描述】：

目前，当我重新加载仪表板时，它首先重定向到 /login，然后如果用户已经登录，则重定向到 /dashboard。它看起来很有线。如果用户登录，我该如何解决，使其直接降落到 /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;

【问题讨论】：

你用路由器吗？
路由器添加到问题请检查。
仪表板的路径是什么？
@renaud tarnec /task

标签： firebase vue.js vuejs2 firebase-authentication vue-router

【解决方案1】：

不知道你是怎么配置和导出Firebase的，但是我觉得你应该修改你的路由器代码如下（见代码中的cmets）：

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

【讨论】：

非常感谢，但是由于 Firebase 没有正确初始化，这对我不起作用。我修复了它并提到了我获得解决方案的链接。
不错，这个教程很好。但我相信你已经注意到在教程中他们也这样做了const currentUser = firebase.auth().currentUser;。换句话说，如果您不实施我的回答中提出的修改，它将不起作用;-)

【解决方案2】：

我在初始化vue实例时出错了，我从https://medium.com/@anas.mammeri/vue-2-firebase-how-to-build-a-vue-app-with-firebase-authentication-system-in-15-minutes-fdce6f289c3c找到了解决办法

【讨论】：