Vuex의 비동기 문제 해결: 최신 토큰 값 가져오기
Vuex를 사용하여 상태를 관리할 때 비동기 문제가 발생할 수 있습니다. 특히 비동기 데이터를 가져와서 Vuex에 저장한 후 즉시 가져올 때 특히 그렇습니다. 이 기사에서는 이 문제를 해결하는 방법에 대해 논의하고 토큰 가치를 얻을 때 항상 최신 가치를 얻을 수 있도록 보장합니다.
문제 배경
auth로그인, 로그아웃, 토큰 확인을 위한 메소드가 포함된 Vuex 모듈이 있다고 가정해 보겠습니다 . 로그인이 성공한 후에는 Vuex 상태에 토큰을 저장하고 필요할 때 상태에서 토큰 값을 가져옵니다.
const auth = {
state: {
token: null
},
mutations: {
SET_TOKEN(state, token) {
state.token = token;
},
CLEAR_TOKEN(state) {
state.token = null;
}
},
actions: {
login({
commit }, loginForm) {
return new Promise((resolve, reject) => {
// 调用登录接口，传递登录表单数据
axios.post('http://localhost:8989/user/login', loginForm)
.then(response => {
const token = response.data.data.token;
// 将token保存到Vuex中
commit('SET_TOKEN', token);
// 将token保存到浏览器的localStorage中，以便在刷新页面后仍然可以保持登录状态
localStorage.setItem('token', token);
resolve();
})
.catch(error => {
reject(error);
});
});
},
logout({
commit }) {
// 清除token并重定向到登录页面
commit('CLEAR_TOKEN');
localStorage.removeItem('token');
router.push('/');
},
checkToken({
commit }) {
const token = localStorage.getItem('token');
if (token) {
// 将token保存到Vuex中
commit('SET_TOKEN', token);
} else {
// 如果没有token，则重定向到登录页面
router.push('/');
}
},
getToken(){
console.log("我被调用了")
return this.state.token;
}
}
};
위 코드에서는 Action에 getToken 메소드를 넣었는데, 이로 인해 문제가 발생합니다. 즉, 로그인에 성공했지만 토큰도 성공적으로 설정되었지만 토큰을 받으면 이 토큰이 null임을 알게 됩니다. .
비동기 문제로 인해 getToken메소드를 즉시 호출하면 호출 당시 메소드가 아직 호출되지 않았을 수 있으므로 값을 반환할 수 null있습니다 .getTokenSET_TOKEN
해결책
이 문제를 해결하려면 Token의 값을 얻기 위해 getToken메소드를 statea로 이동하고 정의 해야 합니다 . getter이런 식으로 호출되면 getToken최신 토큰 값을 반환합니다.
수정된 코드는 다음과 같습니다.
const auth = {
state: {
token: null
},
mutations: {
SET_TOKEN(state, token) {
state.token = token;
},
CLEAR_TOKEN(state) {
state.token = null;
}
},
actions: {
login({
commit }, loginForm) {
return new Promise((resolve, reject) => {
// 调用登录接口，传递登录表单数据
axios.post('http://localhost:8989/user/login', loginForm)
.then(response => {
const token = response.data.data.token;
// 将token保存到Vuex中
commit('SET_TOKEN', token);
// 将token保存到浏览器的localStorage中，以便在刷新页面后仍然可以保持登录状态
localStorage.setItem('token', token);
resolve();
})
.catch(error => {
reject(error);
});
});
},
logout({
commit }) {
// 清除token并重定向到登录页面
commit('CLEAR_TOKEN');
localStorage.removeItem('token');
router.push('/');
},
checkToken({
commit }) {
const token = localStorage.getItem('token');
if (token) {
// 将token保存到Vuex中
commit('SET_TOKEN', token);
} else {
// 如果没有token，则重定向到登录页面
router.push('/');
}
}
},
getters: {
getToken(state) {
return state.token;
}
}
};
this.$store.getters.getToken구성 요소에서 최신 토큰 값을 가져오는 데 사용할 수 있습니다 .
다음 코드를 통해 정상적으로 얻을 수 있습니다
