Vuex中getters的isLoggedIn总是返回true，路由守卫失效如何解决

核心问题定位 #

• 最常见原因：getters的isLoggedIn判断逻辑存在漏洞。你当前用state.Token != null做判断，而空字符串""、空格字符串等假值是不等于null的，会返回true。如果之前操作中localStorage存入了空的access_token，就会导致isLoggedIn始终返回真。
• 第二个常见原因：需要鉴权的路由未配置meta.requiresAuth: true。你的路由守卫逻辑只会对标记了requiresAuth的路由做鉴权，未标记的路由会直接放行。
• 第三个可能原因：路由守卫中导入的store实例不是项目的根store实例，导致读取的getters值错误。

修复方案 #

1. 优化isLoggedIn判断逻辑 #

将getters中的判断改为真值校验，同时覆盖null、undefined、空字符串等所有无效情况：

getters:{
    isLoggedIn(state){
        return !!state.Token;
    }
},

2. 检查路由配置 #

所有需要登录后才能访问的路由，必须添加meta.requiresAuth标记，示例：

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true } // 缺少该配置会导致路由守卫不生效
  },
  // 登录页等无需鉴权的路由不需要加该标记
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  }
]

3. 新增调试代码定位问题 #

在路由守卫中添加日志打印，确认变量值是否符合预期：

route.beforeEach((to, from, next) => {
    // 打印值定位是state错误还是路由配置错误
    console.log('当前存储的Token:', store.state.Token)
    console.log('isLoggedIn计算结果:', store.getters.isLoggedIn)
    console.log('当前路由是否需要鉴权:', to.meta.requiresAuth)
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    if(requiresAuth){ 
        if(!store.getters.isLoggedIn){
            next({name: 'Login'}); 
        }else{
            next();
        }
    }else{
        next();
    }
});

4. 补充异常场景兜底 #

登录接口请求中，新增token有效性判断，避免存入空token到localStorage：

loginUser({commit}, formData){                
      http.post("/login",formData).then((response)=>{
            if(response.data.status === 'success' && response.data.token){
                // 新增token存在性判断
                const token = response.data.token;
                localStorage.setItem('access_token',token);
                localStorage.setItem('user',response.data.user);
                commit('AUTHENTICATION',token);                         
                router.push({name:'Dashboard'});
                // 不需要router.go()，避免不必要的页面刷新
            }else{
                commit("LOGIN_ERROR",response.data.message);
                // 登录失败统一清空无效存储
                commit('UNAUTHENTICATION',null);                        
                localStorage.removeItem('access_token');
            }
        })
        .catch((error)=>{
            if(error){
                commit('UNAUTHENTICATION',null);                        
                localStorage.removeItem('access_token');
                commit("GET_ERRORS",error.response?.data?.errors || '登录请求异常');
            }
        });
},

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