feat: add token getter

Author: hisasann

src/store/auth.ts

@@ -17,6 +17,10 @@ export interface IState {
    * ログイン中かどうか
    */
   loggedIn: boolean
+  /**
+   * ログイントークン
+   */
+  token: string | null
   /**
    * ローディング
    */
@@ -34,6 +38,7 @@ export interface IState {
 export const state = (): IState => ({
   authUser: null,
   loggedIn: false,
+  token: null,
   busy: {
     register: false,
     login: false,
@@ -48,6 +53,9 @@ export const state = (): IState => ({
 export const getters = {
   isAuthenticated(state: IState): boolean {
     return !!state.loggedIn
+  },
+  getToken(state: IState): string | null {
+    return state.token
   }
 }
 
@@ -67,6 +75,12 @@ export const mutations = {
   updateLoginStatus(state: IState, status: boolean): void {
     state.loggedIn = status
   },
+  /**
+   * ログイントークンを更新する
+   */
+  updateLoginToken(state: IState, token: string | null): void {
+    state.token = token
+  },
   /**
    * 処理中ステータスを更新する
    */
@@ -117,11 +131,16 @@ export const actions = {
           cancelToken: cancelToken.getToken(payload)
         } as AxiosRequestConfig
       )
+      const token = headers['access-token']
 
-      setToken(headers['access-token'])
+      if (process.client && token && data.loggedIn) {
+        setToken(token)
+      }
 
       // ログイン状態を更新
       commit('updateLoginStatus', data.loggedIn)
+      // ログイントークンを更新
+      commit('updateLoginToken', token)
       // ユーザー情報をストアに保存
       commit('SET_USER', data)
 
@@ -162,10 +181,14 @@ export const actions = {
         } as AxiosRequestConfig
       )
 
-      unsetToken()
+      if (process.client && !data.loggedIn) {
+        unsetToken()
+      }
 
       // ログイン状態を更新
       commit('updateLoginStatus', data.loggedIn)
+      // ログイントークンを更新
+      commit('updateLoginToken', null)
 
       return data
     } catch (err) {
@@ -198,13 +221,20 @@ export const actions = {
           cancelToken: cancelToken.getToken(payload)
         } as AxiosRequestConfig
       )
-
-      if (headers['access-token'] && data.loggedIn) {
-        setToken(headers['access-token'])
+      const token = headers['access-token']
+
+      if (process.client) {
+        if (token && data.loggedIn) {
+          setToken(token)
+        } else if (!token || !data.loggedIn) {
+          unsetToken()
+        }
       }
 
       // ログイン状態を更新
       commit('updateLoginStatus', data.loggedIn)
+      // ログイントークンを更新
+      commit('updateLoginToken', token)
 
       return data
     } catch (err) {

src/store/index.ts

@@ -1,5 +1,6 @@
 import { ActionContext } from 'vuex'
 import { ILoginCheckPayload } from '@/interface/User/ILoginCheck'
+import { setToken, unsetToken } from '@/utilities/'
 
 /**
  * store 用インターフェイス
@@ -58,14 +59,25 @@ export const actions = {
     await console.log('nuxtServerInit')
     commit('setIsServerInitCalled')
 
+    // ログインチェック
     await dispatch('auth/loginCheck', {} as ILoginCheckPayload)
   },
   /**
    * クライアント初期化時の処理
    */
   // @ts-ignore
-  nuxtClientInit({ commit }: ActionContext<any, any>, { app }): void {
+  nuxtClientInit({ commit, getters }: ActionContext<any, any>, { app }): void {
     console.log('nuxtClientInit')
     commit('setIsClientInitCalled')
+
+    // nuxtServerInit でログインチェックした state を元に token を cookie にセットし直す
+    const token = getters['auth/getToken']
+    const loggedIn = getters['auth/isAuthenticated']
+    console.log('token', getters['auth/getToken'], 'loggedIn:', loggedIn)
+    if (token && loggedIn) {
+      setToken(token)
+    } else {
+      unsetToken()
+    }
   }
 }