Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (8) エラーハンドリング

<template>
  <p>システムエラーが発生しました。</p>
</template>

import SystemError from './pages/errors/System.vue'

/* 中略 */

const routes = [
  /* 中略 */
  {
    path: '/500',
    component: SystemError
  }
]

export const OK = 200
export const CREATED = 201
export const INTERNAL_SERVER_ERROR = 500

const state = {
  code: null
}

const mutations = {
  setCode (state, code) {
    state.code = code
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

import auth from './auth'
import error from './error' // ★ 追加

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    auth,
    error // ★ 追加
  }
})

export default store

const state = {
  user: null,
  apiStatus: null
}

const mutations = {
  setUser (state, user) {/* 中略 */},
  setApiStatus (state, status) {
    state.apiStatus = status
  }
}

import { OK } from '../util'

async login (context, data) {
  context.commit('setApiStatus', null)
  const response = await axios.post('/api/login', data)
    .catch(err => err.response || err)

  if (response.status === OK) {
    context.commit('setApiStatus', true)
    context.commit('setUser', response.data)
    return false
  }

  context.commit('setApiStatus', false)
  context.commit('error/setCode', response.status, { root: true })
},

const result = await someAsyncTask().catch(error => error.something)

const response = await axios.post('...', data).catch(error => error.response || error)

// 最初はnull
context.commit('setApiStatus', null)

if (response.status === OK) {
  // 成功したらtrue
  context.commit('setApiStatus', true)
  return false
}

// 失敗だったらfalse
context.commit('setApiStatus', false)

context.commit('error/setCode', response.status, { root: true })

computed: {
  apiStatus () {
    return this.$store.state.auth.apiStatus
  }
},

async login () {
  // authストアのloginアクションを呼び出す
  await this.$store.dispatch('auth/login', this.loginForm)

  if (this.apiStatus) {
    // トップページに移動する
    this.$router.push('/')
  }
}

import { INTERNAL_SERVER_ERROR } from './util'

export default {
  components: {
    Navbar,
    Footer
  },
  computed: {
    errorCode () {
      return this.$store.state.error.code
    }
  },
  watch: {
    errorCode: {
      handler (val) {
        if (val === INTERNAL_SERVER_ERROR) {
          this.$router.push('/500')
        }
      },
      immediate: true
    },
    $route () {
      this.$store.commit('error/setCode', null)
    }
  }
}

export const UNPROCESSABLE_ENTITY = 422

import { OK, UNPROCESSABLE_ENTITY } from '../util'

const state = {
  user: null,
  apiStatus: null,
  loginErrorMessages: null
}

const mutations = {
  setUser (state, user) {/* 中略 */},
  setApiStatus (state, status) {/* 中略 */},
  setLoginErrorMessages (state, messages) {
    state.loginErrorMessages = messages
  }
}

async login (context, data) {
  /* 中略 */
  context.commit('setApiStatus', false)
  if (response.status === UNPROCESSABLE_ENTITY) {
    context.commit('setLoginErrorMessages', response.data.errors)
  } else {
    context.commit('error/setCode', response.status, { root: true })
  }
}

computed: {
  apiStatus () {
    return this.$store.state.auth.apiStatus
  },
  loginErrors () {
    return this.$store.state.auth.loginErrorMessages
  }
},

import { mapState } from 'vuex'

computed: {
  ...mapState({
    apiStatus: state => state.auth.apiStatus,
    loginErrors: state => state.auth.loginErrorMessages
  })
}

<form class="form" @submit.prevent="login">
  <div v-if="loginErrors" class="errors">
    <ul v-if="loginErrors.email">
      <li v-for="msg in loginErrors.email" :key="msg">{{ msg }}</li>
    </ul>
    <ul v-if="loginErrors.password">
      <li v-for="msg in loginErrors.password" :key="msg">{{ msg }}</li>
    </ul>
  </div>
  <!-- 中略 -->
</form>

methods: {
  /* 中略 */
  clearError () {
    this.$store.commit('auth/setLoginErrorMessages', null)
  }
},
created () {
  this.clearError()
}

window.axios.interceptors.response.use(
  response => response,
  error => error.response || error
)

const response = await axios.post('/api/register', data).catch(error => error.response || error)
const response = await axios.post('/api/login', data).catch(error => error.response || error)
const response = await axios.post('/api/logout', data).catch(error => error.response || error)
const response = await axios.post('/api/user', data).catch(error => error.response || error)

import { OK, CREATED, UNPROCESSABLE_ENTITY } from '../util'

const state = {
  user: null,
  apiStatus: null,
  loginErrorMessages: null,
  registerErrorMessages: null
}

const getters = {
  check: state => !! state.user,
  username: state => state.user ? state.user.name : ''
}

const mutations = {
  setUser (state, user) {
    state.user = user
  },
  setApiStatus (state, status) {
    state.apiStatus = status
  },
  setLoginErrorMessages (state, messages) {
    state.loginErrorMessages = messages
  },
  setRegisterErrorMessages (state, messages) {
    state.registerErrorMessages = messages
  }
}

const actions = {
  // 会員登録
  async register (context, data) {
    context.commit('setApiStatus', null)
    const response = await axios.post('/api/register', data)

    if (response.status === CREATED) {
      context.commit('setApiStatus', true)
      context.commit('setUser', response.data)
      return false
    }

    context.commit('setApiStatus', false)
    if (response.status === UNPROCESSABLE_ENTITY) {
      context.commit('setRegisterErrorMessages', response.data.errors)
    } else {
      context.commit('error/setCode', response.status, { root: true })
    }
  },

  // ログイン
  async login (context, data) {
    context.commit('setApiStatus', null)
    const response = await axios.post('/api/login', data)

    if (response.status === OK) {
      context.commit('setApiStatus', true)
      context.commit('setUser', response.data)
      return false
    }

    context.commit('setApiStatus', false)
    if (response.status === UNPROCESSABLE_ENTITY) {
      context.commit('setLoginErrorMessages', response.data.errors)
    } else {
      context.commit('error/setCode', response.status, { root: true })
    }
  },

  // ログアウト
  async logout (context) {
    context.commit('setApiStatus', null)
    const response = await axios.post('/api/logout')

    if (response.status === OK) {
      context.commit('setApiStatus', true)
      context.commit('setUser', null)
      return false
    }

    context.commit('setApiStatus', false)
    context.commit('error/setCode', response.status, { root: true })
  },

  // ログインユーザーチェック
  async currentUser (context) {
    context.commit('setApiStatus', null)
    const response = await axios.get('/api/user')
    const user = response.data || null

    if (response.status === OK) {
      context.commit('setApiStatus', true)
      context.commit('setUser', user)
      return false
    }

    context.commit('setApiStatus', false)
    context.commit('error/setCode', response.status, { root: true })
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

export default {
  data () {/* 中略 */},
  computed: mapState({
    apiStatus: state => state.auth.apiStatus,
    loginErrors: state => state.auth.loginErrorMessages,
    registerErrors: state => state.auth.registerErrorMessages
  }),
  methods: {
    async login () {/* 中略 */},
    async register () {
      // authストアのresigterアクションを呼び出す
      await this.$store.dispatch('auth/register', this.registerForm)

      if (this.apiStatus) {
        // トップページに移動する
        this.$router.push('/')
      }
    },
    clearError () {
      this.$store.commit('auth/setLoginErrorMessages', null)
      this.$store.commit('auth/setRegisterErrorMessages', null)
    }
  }
}

<form class="form" @submit.prevent="register">
  <div v-if="registerErrors" class="errors">
    <ul v-if="registerErrors.name">
      <li v-for="msg in registerErrors.name" :key="msg">{{ msg }}</li>
    </ul>
    <ul v-if="registerErrors.email">
      <li v-for="msg in registerErrors.email" :key="msg">{{ msg }}</li>
    </ul>
    <ul v-if="registerErrors.password">
      <li v-for="msg in registerErrors.password" :key="msg">{{ msg }}</li>
    </ul>
  </div>
  <!-- 中略 -->
</form>

import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState({
      apiStatus: state => state.auth.apiStatus
    }),
    ...mapGetters({
      isLogin: 'auth/check'
    })
  },
  methods: {
    async logout () {
      await this.$store.dispatch('auth/logout')

      if (this.apiStatus) {
        this.$router.push('/login')
      }
    }
  }
}