로그아웃이 로컬 스토어 또는 상태에서 토큰을 지우지 않습니다.

로그아웃이 로컬 스토어 또는 상태에서 토큰을 지우지 않습니다.

vuex를 사용하여 인증 시스템을 수행하려고 합니다.구현은 가능했지만 앱에 로그인한 후 로그아웃해도 서버에서 보호된 데이터에 액세스할 수 있으며 코드 수정에 도움이 될 수 있습니다.즉, 스토어입니다.vue 파일 코드:

import Vue from 'vue';
import Vuex from 'vuex';
import { getAPI } from '@/axios';

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    accessToken: JSON.parse(localStorage.getItem('accessToken')) || null,
    APIData: '',
  },
  mutations: {
    // eslint-disable-next-line camelcase
    updateStorage(state, access_token) {
      // eslint-disable-next-line camelcase
      state.accessToken = access_token;
      localStorage.setItem('accessToken', JSON.stringify(access_token));
    },
    destroyToken(state) {
      state.accessToken = null;
    },
  },
  getters: {
    loggedIn(state) {
      return state.accessToken != null;
    },
  },
  actions: {
    userLogin(context, usercredentials) {
      // eslint-disable-next-line consistent-return
      return new Promise((resolve, reject) => {
        getAPI.post('/login', {
          email: usercredentials.email,
          password: usercredentials.password,
        })
          .then((response) => {
            context.commit('updateStorage', { access_token: response.data.access_token });
            resolve();
            console.log(response.data.access_token);
            // console.log(localStorage.getItem('accessToken'));
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    userLogout(context) {
      if (context.getters.loggedIn) {
        context.commit('destroyToken');
      }
    },
  },
});

지난번 @shob의 도움을 받았을 때

인destroyToken돌연변이도 클리어해야 합니다.localStorage:

destroyToken(state) {
  state.accessToken = null;
  localStorage.setItem('accessToken', "null");
},

그렇지않으면,localStore.getItem('accessToken')새로고침할 때 오래된 내용을 읽습니다.왜냐하면 아무것도 로 설정되어 있지 않기 때문입니다.null.

---

또는 다음 중 하나를 제거할 수 있습니다.destroyToken완전히 변환하여 콜을 다음과 같이 바꿉니다.

context.commit('updateStorage', null);

...~하듯이updateStorage이미 무엇을 하고 있는가destroyToken해야 할 일: 둘 다 갱신됩니다.localStorage그리고.state.accessToken전달된 값을 사용합니다.

---

참고로 이름을 바꿔서updateStorage로.updateAccessToken하지만 그게 중요한 게 아니에요

또 다른 측면: eslint 규칙을 비활성화하지 말고 그냥 존중하는 것이 어떨까요?eslint의 요점은 코드를 일관되게 유지하고 시간이 지나면 더 능숙해지는 것입니다.규칙을 비활성화하기 위해 추가 홉을 사용하는 경우 eslint를 늘리는 대신 코드를 일관되지 않게 유지하는 것이 성가신 일이 되어 생산성을 저하시키므로 이 기능을 해제하는 것이 좋습니다.아니면 적어도 네가 원하지 않는 규칙들을 없애라.
단, 이 경우 파라미터 이름을 변경할 수 있습니다.

mutations: {
  updateStorage(state, accessToken) {
    state.accessToken = accessToken;
    localStorage.setItem('accessToken', JSON.stringify(accessToken));
  },
  // ...
}

잘 될 거야

언급URL : https://stackoverflow.com/questions/66592205/logout-is-not-clearing-token-from-localstore-or-from-state