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

Posted 2023-02-22

【中文标题】vue-router.esm.js?8c4f:2181 TypeError：无法读取未定义的属性“loggedIn”

【英文标题】：vue-router.esm.js?8c4f:2181 TypeError: Cannot read property 'loggedIn' of undefined

【发布时间】：2020-11-22 09:46:57

【问题描述】：

我正在为 vue firebase 应用程序使用 Gmail 身份验证，单击使用 google 登录后，我直接进入仪表板页面，但我看不到仪表板页面的内容，并且在控制台中我看到此错误：TypeError: Cannot读取未定义的属性“loggedIn” 在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 并且看不到仪表板页面的问题吗？

【问题讨论】：

store.use.loggedIn。 use?

将其更改为用户，这是一个错字。但还是一样

【参考方案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");
);