Logout is not clearing token from localstore or from state

Question

I am trying to perform authentication system using vuex. I was able to implement it but after i login to app and then when i logout, I can still access protected data from server, can help with in correcting my code ? my store.vue file code:

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

last time i got help from @shob

user_1891677 · Answer

In destroyToken mutation you also have to clear localStorage:

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

Otherwise, localStore.getItem('accessToken') will read the old contents when you reload, because nothing sets it to null.

Alternatively, you can remove destroyToken mutation altogether and replace the call to it with:

context.commit('updateStorage', null);

...as updateStorage already does what destroyToken should do: it updates both localStorage and state.accessToken with the passed value.

As a side note, I'd rename updateStorage to updateAccessToken, but that's besides the point here.

Another side note: instead of disabling an eslint rule, why don't you just respect it? The whole point of eslint is to keep your code consistent and, in time, become more proficient. If you're going through extra hoops to disable rules and still keep your code inconsistent eslint becomes a nuisance and decreases productivity instead of increasing it, so you might as well turn it off. Or at least turn off rules you don't want.
However, in this case, you can just rename your param:

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

will work just fine.

Logout is not clearing token from localstore or from state

1 Answers