Vuex-persistedstate: can set expire time and specify state

[rootsli]

Do you plan to support the following functions：
1.Specify state value to persiste and set expire time，ex:
const state = {
tokens: ''
}

==>
createPersistedState([{tokens:3600}]) //only Persist state ‘tokens’（Other states are not persistent
） and setting expire time =3600ms

[robinvdvleuten]

Hi @rootsli! Thanks for the suggestion but I would like to keep this library's functionality to a bare minimum. You can do it quite easily yourself if you look at the example in the readme where I set an expiration time to the cookie.

[samizarraa]

can you please put example for set expire time to localstorage !

[robinvdvleuten]

@samizarraa absolutely no time for that

[QuinnBast]

I agree it would be nice to have this built into the plugin. I implemented it myself in localstorage. For @samizarraa, here's an example of how to do it:

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    expiryDate: new Date(),
  },
  getters: {
    isExpired: state => (new Date(state.expiryDate) < new Date()),
  },
  // Actions that alter the state of the store
  mutations: {
    setExpiryDate: (state) => {
      // Create a date
      const date = new Date();
      // Add your delta for expiry. I am expiring in one day.
      date.setDate(date.getDate() + 1);
      // Set the state
      state.expiryDate = date;
    },
  },
  plugins: [createPersistedState()],
});

Hope this helps. If you use the isExpired getter and it returns true, you'll need to re-load all your store values and then use setExpiryDate to update the expiry date to the next expiration value.

[igventurelli]

Following the example of @QuinnBast , I've created an getter to check if the token is expired based on it decoded and added this verification into my authenticated middleware:

I'm using Nuxt

Auth store (store/auth.js):

import jwt from 'jsonwebtoken'
import moment from 'moment'

export default {
  state: () => ({
    token: null,
    user: null
  }),
  getters: {
    token: state => state.token,
    user: state => state.user,
    expired: (state) => {
      const decoded = jwt.decode(state.token)
      return decoded && moment.unix(decoded.exp).isBefore(moment().format())
    }
  },
  mutations: {
    SET_TOKEN: (state, payload) => {
      state.token = payload
    },
    SET_USER: (state, payload) => {
      state.user = payload
    },
    INVALIDATE_TOKEN: (state) => {
      state.token = null
    },
    INVALIDATE_USER: (state) => {
      state.user = null
    }
  },
  actions: {
    setToken: ({ commit }, payload) => {
      commit('SET_TOKEN', payload)
    },
    setUser: ({ commit }, payload) => {
      commit('SET_USER', payload)
    },
    invalidate: ({ commit }) => {
      commit('INVALIDATE_TOKEN')
      commit('INVALIDATE_USER')
    }
  }
}

Authenticated middleware (middleware/authenticated.js)

export default function ({ store, redirect }) {
  if (!store.getters['auth/token']) {
    return redirect('/login')
  }

  if (store.getters['auth/expired']) {
    store.dispatch('auth/invalidate')
    return redirect('/login')
  }
}

I hope it helps somebody :)