vuex-persistedstateでログイン認証の永続化

データの永続化について

JavaScriptでログイン情報を保持するには基本的にはローカルに保存する仕組みを作る必要があります。
ローカルに保存する仕組みとしてはクッキーが有名ですが、最近ではWebStorageを利用するのが一般的なようです。
WebStorageの中でもlocalStorageとsessionStorageがありますが、localStorageはブラウザを閉じてもデータを保持するのに対して、sessionStorageはブラウザを閉じるとデータは破棄されます。
今回はブラウザのリロード時だけデータを保持したいのでsessionStorageを使用します。

vuex-persistedstate のインストール

vuex-persistedstate を使用すると簡単な設定だけでVuexのステート情報を保存することができます。
まずはNPMでインストールしましょう。

$ npm install vuex-persistedstate

ストアの設定

モジュール化されたauthストアがあるとします。
今回はこのstateのtokenをsessionStorageに保存します。

resources/js/store/modules/auth.js

const state = {
	token: ''
};

const mutations = {
	login (state, payload) {
		state.token = payload;
	},
	logout (state) {
		state.token = null;
	}
};

export default {
	namespaced: true,
	state,
	mutations
};

vuex-persistedstateの設定はVuex.Storeのpluginsに設定します。

resources/js/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate";
import auth from "./modules/auth";

Vue.use(Vuex);

export default new Vuex.Store({
	modules: {
		auth
	},
	strict: true,
	plugins: [createPersistedState({
		key: 'TodoApp',
		paths: ['auth.token'],
		storage: window.sessionStorage
	})]
});

以上で設定は完了です。
これで、auth.tokenが変更される度に自動的にsessionStorageも書き換えてくれます。

リロード時にsessionStorageを読み込む

最後にアプリ起動時にsessionStorageを読み込み、tokenをaxiosに設定する処理をします。
Laravelの環境だとグローバルでaxiosが使用できるので下記のようになります。

resources/js/app.js

if (sessionStorage.getItem('TodoApp')) {
	const strageData = JSON.parse(sessionStorage.getItem('TodoApp'));
	if (strageData.auth.token) {
		axios.defaults.headers.common['Authorization'] = 'Bearer ' + strageData.auth.token;
	}
}

以上です。
vuex-persistedstateを使えば簡単にVuexのストアの永続化ができますね。

ここまでのソースコードはGithubに載せてあります。
LaravelTodoSPA