时间戳

首页 > 解决方案 > getters 在 vuex 中总是返回 true

vue.js - getters 在 vuex 中总是返回 true

问题描述

如果没有来自 API 的令牌，getter 中的 isLoggedIn 始终是真事件，我仍然可以转到每条路由，我不知道保护路由中的错误是什么，或者我在状态中存储了错误的令牌。如果（！store.getters.isLoggedIn）{去登录}这个语句不起作用，请帮助我，我被卡住了:(

在 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();
    }
});

标签： vue.jsvuejs2vuexvue-router

解决方案

虽然access_token您的本地存储中没有，但在非严格非版本localStorage.getItem('access_token')中将返回undefined不等于 null 的值，因此您的 getter 将始终为真 ，您应该使用（严格非版本）或（双非版本）：选项1： !=

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

选项 2：

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

推荐阅读