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

会工作得很好。

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

1 个答案: