feat: add axios common event

Author: hisasann

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
   rules: {
     'dot-notation': 'off',
     'no-console': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-object-literal-type-assertion': 'off',
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/no-unused-vars': 'off',

nuxt.config.ts

@@ -53,6 +53,7 @@ module.exports = {
    ** Plugins to load before mounting the App
    */
   plugins: [
+    '@/plugins/axios.ts',
     '@/plugins/constants-inject.ts',
     '@/plugins/env-inject.ts',
     '@/plugins/vue-lazyload.ts'

src/interface/User/ILoginCheck.d.ts

@@ -1,9 +1,7 @@
 /**
  * LoginCheck インターフェイス
  */
-export interface ILoginCheckPayload {
-  token: string
-}
+export interface ILoginCheckPayload {}
 
 export interface ILoginCheck {
   loggedIn: boolean

src/interface/User/ILogout.d.ts

@@ -1,9 +1,7 @@
 /**
  * Logout インターフェイス
  */
-export interface ILogoutPayload {
-  token: string
-}
+export interface ILogoutPayload {}
 
 export interface ILogout {
   loggedIn: boolean

src/layouts/error.vue

@@ -1,20 +1,19 @@
-<template>
-  <div class="container">
-    <h1 v-if="error.statusCode === 404">
-      ページが見つかりません
-    </h1>
-    <h1 v-else>
-      エラーが発生しました
-    </h1>
-    <nuxt-link to="/example">
-      ホーム
-    </nuxt-link>
-  </div>
+<template lang="pug">
+  .container
+    h1(v-if='error.statusCode === 404')
+      | ページが見つかりません
+    h1(v-else='')
+      | エラーが発生しました {{ error.message }}
+    nuxt-link(to='/example')
+      | ホーム
 </template>
-<script>
-export default {
-  props: {
-    error: undefined
-  }
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'nuxt-property-decorator'
+
+@Component
+export default class Error extends Vue {
+  @Prop({ type: Object })
+  public error: any
 }
 </script>

src/middleware/authenticated.ts

@@ -4,16 +4,12 @@
  * @param redirect
  */
 
-import { getTokenFromCookie } from '@/utilities/'
-import { ILoginCheckPayload, ILoginCheck } from '@/interface/User/ILoginCheck'
+import { ILoginCheckPayload } from '@/interface/User/ILoginCheck'
 
 export default async function({ store, redirect }): Promise<void> {
   console.log('authenticated')
 
-  const token = getTokenFromCookie()
-  await store.dispatch('auth/loginCheck', {
-    token
-  } as ILoginCheckPayload)
+  await store.dispatch('auth/loginCheck', {} as ILoginCheckPayload)
 
   if (!store.getters['auth/isAuthenticated']) {
     await redirect('/example/auth/sign-in')

src/pages/example/auth/sign-off.vue

@@ -5,17 +5,14 @@
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
-import { getTokenFromCookie } from '@/utilities/'
 import { ILogoutPayload } from '@/interface/User/ILogout'
 
 @Component({
   middleware: 'authenticated'
 })
 export default class SignOff extends Vue {
   public async mounted() {
-    await this.$store.dispatch('auth/logout', {
-      token: getTokenFromCookie()
-    } as ILogoutPayload)
+    await this.$store.dispatch('auth/logout', {} as ILogoutPayload)
 
     this.$router.replace('/example')
   }

src/plugins/axios.ts

@@ -0,0 +1,38 @@
+/**
+ * @file Expand axios
+ */
+
+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
+    }
+  })
+
+  $axios.onResponse(response => {
+    console.log('$axios.onResponse')
+  })
+
+  $axios.onResponseError((response: AxiosError) => {
+    console.log('$axios.onResponseError')
+    // 通信エラー
+    if (!response.response) {
+      return
+    }
+
+    const { status } = response.response
+
+    if (status === 401) {
+      const message = '401 error'
+
+      error({ statusCode: 401, message })
+    }
+  })
+}

src/store/auth.ts

@@ -88,11 +88,10 @@ export const actions = {
    * login
    * @param state
    * @param commit
-   * @param token
+   * @param payload
    */
   async login(
     this: Vue,
-    // @ts-ignore
     { state, commit }: any,
     payload: ILoginPayload
   ): Promise<IUser | void> {
@@ -108,13 +107,7 @@ export const actions = {
     commit('updateBusyStatus', ['login', true])
 
     try {
-      const {
-        data,
-        headers,
-        status,
-        statusText,
-        config
-      } = await this.$axios.post<IUser>(
+      const { data, headers } = await this.$axios.post<IUser>(
         this.$C.API_ENDPOINT.LOGIN,
         {
           username: payload.username,
@@ -144,10 +137,10 @@ export const actions = {
    * logout
    * @param state
    * @param commit
+   * @param payload
    */
   async logout(
     this: Vue,
-    // @ts-ignore
     { state, commit }: any,
     payload: ILogoutPayload
   ): Promise<ILogout | void> {
@@ -161,19 +154,13 @@ export const actions = {
     commit('updateBusyStatus', ['logout', true])
 
     try {
-      const token: string = payload.token
-      const {
-        data,
-        headers,
-        status,
-        statusText,
-        config
-      } = await this.$axios.post<ILogout>(this.$C.API_ENDPOINT.LOGOUT, {}, {
-        headers: {
-          'access-token': token
-        },
-        cancelToken: cancelToken.getToken(payload)
-      } as AxiosRequestConfig)
+      const { data } = await this.$axios.post<ILogout>(
+        this.$C.API_ENDPOINT.LOGOUT,
+        {},
+        {
+          cancelToken: cancelToken.getToken(payload)
+        } as AxiosRequestConfig
+      )
 
       unsetToken()
 
@@ -192,11 +179,10 @@ export const actions = {
    * loginCheck
    * @param state
    * @param commit
-   * @param token
+   * @param payload
    */
   async loginCheck(
     this: Vue,
-    // @ts-ignore
     { state, commit }: any,
     payload: ILoginCheckPayload
   ): Promise<ILoginCheck | void> {
@@ -205,23 +191,10 @@ export const actions = {
     commit('updateBusyStatus', ['loginCheck', true])
 
     try {
-      const postHeaders = {}
-      const token: string | undefined = payload.token
-      if (token) {
-        postHeaders['access-token'] = token
-      }
-
-      const {
-        data,
-        headers,
-        status,
-        statusText,
-        config
-      } = await this.$axios.post<ILoginCheck>(
+      const { data, headers } = await this.$axios.post<ILoginCheck>(
         this.$C.API_ENDPOINT.LOGIN_CHECK,
         {},
         {
-          headers: postHeaders,
           cancelToken: cancelToken.getToken(payload)
         } as AxiosRequestConfig
       )

src/store/index.ts

@@ -1,6 +1,5 @@
 import { ActionContext } from 'vuex'
 import { ILoginCheckPayload } from '@/interface/User/ILoginCheck'
-import { getTokenFromCookie } from '@/utilities/'
 
 /**
  * store 用インターフェイス
@@ -59,11 +58,7 @@ export const actions = {
     await console.log('nuxtServerInit')
     commit('setIsServerInitCalled')
 
-    const token = getTokenFromCookie(req)
-
-    await dispatch('auth/loginCheck', {
-      token
-    } as ILoginCheckPayload)
+    await dispatch('auth/loginCheck', {} as ILoginCheckPayload)
   },
   /**
    * クライアント初期化時の処理