getters 在 vuex 中总是返回 true

Posted 2023-02-16

【中文标题】getters 在 vuex 中总是返回 true

【英文标题】：getters is always return true in vuex

【发布时间】：2021-11-16 17:15:23

【问题描述】：

如果没有来自 API 的令牌，getter 中的 isLoggedIn 始终是 true 事件，我仍然可以转到每条路由，但我不知道保护路由中的错误是什么，或者我在状态中存储了错误的令牌。在此语句中不起作用 if(!store.getters.isLoggedIn) go to login 请帮助我，我被卡住了:(

在 store.js 中

state:
    Token: localStorage.getItem('access_token') || null,

mutations:
    AUTHENTICATION(state,token)
        state.Token = token;
    ,
    UNAUTHENTICATION(state,response)
        state.Token = response;
    
,
getters:
    isLoggedIn(state)
        return state.Token !=null;
    
,
actions:
    loginUser(commit, formData)                
          http.post("/login",formData).then((response)=>
                if(response.data.status === 'success')
                    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);
                
            )
            .catch((error)=>
                if(error)
                    commit('UNAUTHENTICATION',null);                        
                    localStorage.removeItem('access_token');
                    commit("GET_ERRORS",error.response.data.errors);
                
            );
        );
    ,
    logoutUser(commit)
        http.post("/auth/logout").then((response)=>
            if(response.data.status === "success")
                localStorage.clear();
                commit('UNAUTHENTICATION',null);
                router.push(name:'Login');
                window.location.reload();
            else
                commit("LOGIN_ERROR",response.data.message);
            
        )
        .catch((error)=>
            if(error)
                commit("GET_ERRORS",error.response.data.errors);
            
        );
    
,

在 route.js 中

route.beforeEach((to, from, next) => 
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    if(requiresAuth) 
        if(!store.getters.isLoggedIn)
            next(name: 'Login'); 
        else
            next();
        
    else
        next();
    
);

【问题讨论】：

在 getter 中尝试 console.log(state.Token) 确保数据

令牌仍然存在，但它仍然无法正常工作:(我该怎么做我被困了将近一个星期。

【参考方案1】：

尝试：

if(!store.getters.isLoggedIn || store.getters.isLoggedIn === '') 
  //...

和吸气剂：

 isLoggedIn: (state) => state.Token,

【讨论】：

当我在 route.js 中的 console.log(store.getters.isLoggedIn) 显示 isLoggedIn(state) return state.Token !=null; 时不起作用

现在试试，请更新答案

我试过了，但我不知道如何解决这个问题:(

【参考方案2】：

虽然您的本地存储中没有access_token，但localStorage.getItem('access_token') 将返回值undefined，它在non-strict not version != 中不等于null，所以你getter永远是真的 相反，您应该使用 (strict not version) 或 (double not version )：选项 1：

getters:
    isLoggedIn(state)
        return state.Token !== null; //double equals
    

选项 2：

getters:
    isLoggedIn(state)
        return !!state.Token; // double !
    

【讨论】：

不工作 :( .

!store.getters.isLoggedIn 的结果总是返回 false 是什么意思？