WEBOPIXEL

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

Posted: 2018.11.26 / Category: javascript / Tag: 

Vue.js + Vuexでログイン機能を作るだけだと、ブラウザをリロードすると初期化されログアウトした状態になってしまいますね。
vuex-persistedstate というライブラリを使用するとストアの永続化を簡単に実装することができます。

Sponsored Link

使用環境
vue: ^2.5.7
vuex: ^3.0.1
vuex-persistedstate: ^2.5.4

データの永続化について

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

vuex-persistedstate のインストール

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

$ npm install vuex-persistedstate

ストアの設定

モジュール化されたauthストアがあるとします。
今回はこのstatetokenを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.Storepluginsに設定します。

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
	})]
});
key sessionStorageのキーとなりますので、他のアプリと被らないユニークな文字列にします。
paths 保存するstateを指定します。
今回はauthモジュールのtokenなのでauth.tokenですね。
storage ストレージの種類や動作を指定します。

以上で設定は完了です。
これで、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

参考サイト
【Vuex】リロードしてもStateの中身を消さずに維持する方法