firebase - vue-router.esm.js?8c4f:2181 TypeError：无法读取未定义的属性“loggedIn”

Question

我正在为 vue firebase 应用程序使用 Gmail 身份验证，单击使用 google 登录后，我直接进入仪表板页面，但我看不到仪表板页面的内容，在控制台中我看到此错误：TypeError：无法读取属性'在guardMyroute 未定义的已登录。

这是我在路由文件夹中的 index.js 文件：

import Vue from "vue";
import Router from "vue-router";
import Login from "../components/Login";
import Dashboard from "../components/Dashboard";
import store from '../store'

Vue.use(Router);

function guardMyroute(to, from, next) {
  var isAuthenticated = false;
  if (store.user.loggedIn) isAuthenticated = true;
  else isAuthenticated = false;
  if (isAuthenticated) {
    next(); // allow to enter route
  } else {
    next("/login"); // go to '/login';
  }
}

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/login",
      name: "login",
      component: Login,
      meta: {title: 'Login'}
    },
    {
      path: "/dashboard",
      name: "dashboard",
      beforeEnter : guardMyroute,
      meta: {title: 'Dashboard'},
      component: Dashboard,
    }
  ],
});

export default router;

这是 store.js 文件：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    user: {
      loggedIn: false,
      data: null
    }
  },
  getters: {
    user(state){
      return state.user
    }
  },
  mutations: {
    SET_LOGGED_IN(state, value) {
      state.user.loggedIn = value;
    },
    SET_USER(state, data) {
      state.user.data = data;
    }
  },
  actions: {
    fetchUser({ commit }, user) {
      commit("SET_LOGGED_IN", user !== null);
      if (user) {
        commit("SET_USER", {
          displayName: user.displayName,
          email: user.email
        });
      } else {
        commit("SET_USER", null);
      }
    }
  }
});

您能找出导致错误loggedIn undefined 并且看不到仪表板页面的问题吗？

标签： firebasevue.jsvuexvue-router

Answer 1

将功能更改为：

    function guardMyroute(to, from, next) {
   if (store.getters.user.loggedIn) {
    next(); // allow to enter route
  } else {
    next("/login"); // go to '/login';
  }
}

并在 main.js 中将代码更改为：

 firebase.auth().onAuthStateChanged((user) => {
  store.dispatch("fetchUser", user);
  new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount("#app");
});