学部生実習生として、会社はVueJSを利用してショッピングセンターを作っています.
基本的なプレイヤー登録管理を行うとともに、実現した内容を整理したい.
これは最も基本的な認証管理実装であるが、何らかの理由でバックエンドはCookieとセッションを使用せず、accessTokenとrefreshTokenのみを使用する.
詳細は不明ですが、いずれにしても、Googleで見つけられる基本セッションとトークンを使用してログイン管理を行う例に従うのではなく、サーバ上でトークンのみを提供し、フロント管理を実施する必要があります.
代表を助けましょう.

Vuex

Vuexとは?

VuexはVueです.jsアプリケーションのステータス管理モード+ライブラリ.中央リポジトリにステータスを格納し、Vueアプリケーションの任意の場所からアクセスできます.
Vuexステータスは予測可能な方法でのみ変更できます.

なぜVuexを使うのか

Vuexを使用する最大の理由は、ステータス管理とデータの動的予測を一目で見ることができるようにするためです.
このようにできる基本原理は,Fluxモードで作成された一方向データストリームの開発モードのおかげといえる.

FluxモードはMVCモードの双方向データストリームによる複雑さを解決した一方向データストリームの開発モデルである.

Voex Storeサイクル

actions

API呼び出しと同様の非同期動作を実行する.

actionsは、突然変異を呼び出して状態を変更することができる.

mutations

stateで変更できる方法.

同期実行.

state

Vue素子に相当するデータ

Vuexは、突然変異のみでstateを変更することを推奨する.

getter

Vue構成部品で計算されたような計算値を返します.

stateの変更はviewに反映され更新される.

ユーザー情報の保存

ログイン後、APIから受信した応答では、Vuexにユーザに関する情報を格納して利用しようとする.
ここで、APIリクエストを保存するときにヘッダに含まれる転送のaccess tokenによってアクティブ化しようとします.ただし、ブラウザをリフレッシュまたは終了すると、vuexに格納されているステータスは維持されず削除されます.
これらの問題を解決する方法はvuex-persistedstateというライブラリです.
このライブラリは、vuexに格納されているstateを自動的にローカルストレージに関連付け、更新および管理できます.
すべてのVuex stateをローカルストレージに関連付けると、ローカルストレージから頻繁に値が取得され、格納され、速度が低下する可能性があります.
この問題を解決するには、必要なvuexモジュールのみを永続状態に設定します.

	import { createStore } from 'vuex';
    import createPersistedState from 'vuex-persistedstate';

    import user from './modules/user';
    import access_token from './modules/access_token';

    export default createStore({
        state: {
          ...
        },
        mutations: {
          ...
        },
        actions: {
          ...
        },
        getters: {
          ...
        },
        modules: {
            user,
            access_token,
            ...
        },
        plugins: [
            createPersistedState({
                paths: ['access_token'],
            })
        ],
    });

私が行っているプロジェクトはuserとaccess tokenをvuexstoreモジュールとして別々に使用しています.
規模が大きいほどvuexの管理が困難になり,各モジュールに分けて使用するほど管理が容易になる.

アクセスtokenをpersistedstateに保存するには問題があります

前述したように、Vuex-persistedStateはlocalStorageを使用します.つまり、ブラウザ・アプリケーション・リポジトリに格納され、自動ログインはスムーズに実行できますが、一般的なログインではいくつかの問題が発生します.ブラウザを終了するときはログアウトする必要がありますが、現在の状況ではログアウトしません.
また、tokenをlocalStorageに格納すると、他の人は同じデバイスを使用してトークンを盗む可能性があるので、これはよくないと思います.ただし、自動ログインしたユーザーが同意してデバイスに格納するため、リスクを負いlocalStorageを使用します.

試してみる。sessionStorage

これらの問題を解決するために、セッションストレージを使用しました.
ただし、セッションストレージに格納されているデータは、各セッションにコンテナを作成します.つまり、セッションがタブ間で共有されていない場合、新しいタブを開いてサイトにアクセスすると、ログインしていないことがわかります.

試すjs-cookie

デフォルトでは、Cookieはブラウザで保存され、期限が切れる前にhttpリクエストがヘッダーに含まれるたびに破棄されます.Cookieはドメインごとに設定してブラウザに保存できるので、他のタブを使用してサイトにアクセスしても同じCookieにアクセスできます.
vue-cookie、vue-cookieなどのライブラリがありますが、使用しなくてもjs-cookieライブラリとして完全に使用できます.

Vuex+js-cookieによるログイン管理

アクセストークンをVuexstoreに格納する必要があります.リフレッシュしても値を維持する必要があります.
Cookieで使用するコンポーネントを直接導入できると思いますが、Vuexによるステータス管理による管理のメリットを考慮して、VuexにCookieを追加して使用することで実現します.

	import { createStore } from 'vuex';
    import createPersistedState from 'vuex-persistedstate';

    import user from './modules/user';
    import access_token from './modules/access_token';

    export default createStore({
        state: {
          ...
        },
        mutations: {
          ...
        },
        actions: {
          ...
        },
        getters: {
          ...
        },
        modules: {
            user,
            access_token,
            ...
        },
        plugins: [
            createPersistedState({
			paths: ['access_token'],
			storage: {
				getItem(key) {
					if (JSON.parse(localStorage.getItem('saveLogin'))) {
						return localStorage.getItem(key);
					} else {
						return Cookies.get(key);
						// return sessionStorage.getItem(key);
					}
				},
				setItem(key, value) {
					if (JSON.parse(localStorage.getItem('saveLogin'))) {
						localStorage.setItem(key, value);
					} else {
						Cookies.set(key, value);
						// sessionStorage.setItem(key, value);
					}
				},
				removeItem(key) {
					if (JSON.parse(localStorage.getItem('saveLogin'))) {
						localStorage.removeItem(key);
					} else {
						Cookies.get(key);
						// sessionStorage.removeItem(key);
					}
				},
			},
		}),
        ],
    });

Vuex pluginセクションでは、vuex-persistedStateカスタムストレージのコードを実装します.
getItemには、vuexから値を取得する際に処理されるロジックが含まれており、setItemおよびremoveItemは、値を格納および削除する際のカスタムロジックを同様に追加できます.
ログイン時にsaveLoginに自動的にログインして保存するかどうか、これらの値に基づいてローカルストレージからaccessTokenを保存およびインポートするか、Cookieから値を保存およびインポートするかを決定します.

Cookieの使用に関する質問

これにより、自動ログインと通常のログインが実現されます.
ただし、クッキーは送信するたびにリクエストとともに送信されますが、実際にはサーバがクッキーの値を読み取らず、余分なクッキーデータを送信するオーバーヘッドがありますが、現在進行中のプロジェクトの場合、これが最善の選択かもしれません.