refactor(axios): move to call setToken to plugins/axios.ts

Author: hisasann

src/plugins/axios.ts

@@ -4,35 +4,52 @@
 
 import { AxiosError, AxiosRequestConfig } from 'axios'
 import Vue from 'vue'
-import { getTokenFromCookie } from '@/utilities/'
-
-export default ({ $axios, app, req, error }) => {
-  $axios.onRequest((config: AxiosRequestConfig) => {
-    console.log('$axios.onRequest')
-    const token = getTokenFromCookie(req)
-
-    if (token) {
-      config.headers['access-token'] = token
+import { setToken, unsetToken, getTokenFromCookie } from '@/utilities/'
+
+export default ({ $axios, app, req, error }): void => {
+  $axios.onRequest(
+    (config: AxiosRequestConfig): void => {
+      const token = getTokenFromCookie(req)
+      console.log('$axios.onRequest', token)
+
+      // トークンがあればログイン済みなのでリクエストヘッダで送信する
+      if (token) {
+        config.headers[app.$C.ACCESS_TOKEN_NAME] = token
+      }
     }
-  })
-
-  $axios.onResponse(response => {
-    console.log('$axios.onResponse')
-  })
-
-  $axios.onResponseError((response: AxiosError) => {
-    console.log('$axios.onResponseError')
-    // 通信エラー
-    if (!response.response) {
-      return
+  )
+
+  $axios.onResponse(
+    (response): void => {
+      const token = response.headers[app.$C.ACCESS_TOKEN_NAME]
+      console.log('$axios.onResponse', token)
+
+      // CSR のときだけトークンをセットする、 SSR のときは nuxtClientInit でセットしている
+      if (process.client) {
+        if (token) {
+          setToken(token)
+        } else {
+          unsetToken()
+        }
+      }
     }
+  )
+
+  $axios.onResponseError(
+    (response: AxiosError): void => {
+      console.log('$axios.onResponseError')
+      // 通信エラー
+      if (!response.response) {
+        return
+      }
 
-    const { status } = response.response
+      const { status } = response.response
 
-    if (status === 401) {
-      const message = '401 error'
+      if (status === app.$C.HTTP_STATUS.UNAUTHORIZED) {
+        const message = '401 error'
 
-      error({ statusCode: 401, message })
+        error({ statusCode: 401, message })
+      }
     }
-  })
+  )
 }

src/store/auth.ts

@@ -3,7 +3,7 @@ import { AxiosRequestConfig } from 'axios'
 import { ILoginPayload, IUser } from '@/interface/User/ILogin'
 import { ILoginCheckPayload, ILoginCheck } from '@/interface/User/ILoginCheck'
 import { ILogoutPayload, ILogout } from '@/interface/User/ILogout'
-import { setToken, unsetToken, cancelToken } from '@/utilities/'
+import { cancelToken } from '@/utilities/'
 
 /**
  * store 用インターフェイス
@@ -131,11 +131,7 @@ export const actions = {
           cancelToken: cancelToken.getToken(payload)
         } as AxiosRequestConfig
       )
-      const token = headers['access-token']
-
-      if (process.client && token && data.loggedIn) {
-        setToken(token)
-      }
+      const token = headers[this.$C.ACCESS_TOKEN_NAME]
 
       // ログイン状態を更新
       commit('updateLoginStatus', data.loggedIn)
@@ -181,10 +177,6 @@ export const actions = {
         } as AxiosRequestConfig
       )
 
-      if (process.client && !data.loggedIn) {
-        unsetToken()
-      }
-
       // ログイン状態を更新
       commit('updateLoginStatus', data.loggedIn)
       // ログイントークンを更新
@@ -221,15 +213,7 @@ export const actions = {
           cancelToken: cancelToken.getToken(payload)
         } as AxiosRequestConfig
       )
-      const token = headers['access-token']
-
-      if (process.client) {
-        if (token && data.loggedIn) {
-          setToken(token)
-        } else if (!token || !data.loggedIn) {
-          unsetToken()
-        }
-      }
+      const token = headers[this.$C.ACCESS_TOKEN_NAME]
 
       // ログイン状態を更新
       commit('updateLoginStatus', data.loggedIn)