Vuex路由守卫未登录跳转失败，!store.getters.loggedIn始终返回false如何解决

• 1. 导入对象错误：路由守卫代码中直接导入了auth模块的源文件，而非Vuex的根Store实例，模块源文件本身不会挂载Vuex计算后的getters属性，因此store.getters.loggedIn始终为undefined，取反后为false，判断逻辑失效。
• 2. 命名空间调用错误：auth模块开启了namespaced: true，就算正确导入根Store，命名空间模块的getters也需要按模块名/getter名的格式访问，直接调用store.getters.loggedIn无法取到对应值。
• 3. 缺少白名单防护：当前逻辑没有对登录页做免登判断，极端情况下会出现重定向循环。

第一步：修正根Store导入 #

导入Vuex的根Store实例文件（通常是@/store/index.js），而非单独的auth模块文件。

第二步：修正路由守卫逻辑 #

按命名空间规则调用getters，补充白名单判断避免重定向问题：

import router from '@/route/index.js';
// 导入根Store实例
import store from '@/store/index.js';

// 免登白名单
const whiteList = ['Login']

router.beforeEach((to, from, next) => {    
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  // 命名空间格式调用getter
  const isLoggedIn = store.getters['auth/loggedIn'];

  if (requiresAuth) {
    if (!isLoggedIn) {
      next({name: 'Login'}); 
    } else {
      next();
    }
  } else {
    // 已登录用户访问登录页直接跳转到后台
    if (to.name === 'Login' && isLoggedIn) {
      next({name: 'Dashboard'})
    } else {
      next();
    }
  }
});

第三步：优化登录状态判断逻辑（可选） #

如果localStorage可能存储空字符串的token，建议将getter的判断改为更严谨的布尔转换，避免空字符串误判为已登录：

// store.js的getters部分修改
getters:{
  loggedIn(state){
    return !!state.Token;
  }
},

登录成功后的router.go()、退出登录后的window.location.reload()可以删除，Vuex的状态更新是响应式的，不需要强制刷新页面即可触发路由守卫的判断，强制刷新反而会降低用户体验。

内容的提问来源于stack exchange，提问作者Oeng Kim Chhay