注销不会从本地存储或状态中清除令牌

Question

我正在尝试使用 vuex 执行身份验证系统。我能够实现它但是在我登录到应用程序然后注销时，我仍然可以从服务器访问受保护的数据，可以帮助我更正我的代码吗？我的 store.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

的帮助

Answer 1

在 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));
  },
  // ...
}

会很好用。

注销不会从本地存储或状态中清除令牌

Logout is not clearing token from localstore or from state

vue.js

vuex