Posted: 2018.11.26 / Category: javascript / Tag: Vue

Vue.js + Vuexでログイン機能を作るだけだと、ブラウザをリロードすると初期化されログアウトした状態になってしまいますね。
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