Laravel + Vue.js エラーレスポンスを受けとった際にページを切り替える

11353 ワード
エラー対処 Vue.js store Laravel Laravel テキストリンク

前提

エラーレスポンスを受けとった際に、そのステータスコードに応じたエラーページを表示させることができるような仕組みを実装していきます。

環境

PHP Laravel Vue.js
7.4.5 7.28.4 2.6.11

全体的な処理の流れ

レスポンスを受けとったあと

正常レスポンスであった場合

レスポンスが期待通りであった場合は、通常通りその後の処理に進みます。
storeにあるデータを保管したり、dataオプションにデータを格納したり、$routerでコンポーネントを切り替えたりします。

エラーレスポンスであった場合

前提

以下のコードを参考に説明していきます。
グループ作成処理を行うAPIです。

補足
別のファイルでexport const CREATED = 201と定義して、それをインポートしています。

Vue.js
methods: {
  //グループ作成処理
  async submit() {
    const response = await axios.post('グループ作成処理APIルーティング')
    if( response.status !== CREATED) {
      this.$store.commit('error/setCode', response.status)
    }
    this.$router.push('遷移先のルーティング')
  }
}

レスポンスのステータスコードをerrorsストアに保存

エラーレスポンスが返ってきた場合は、まずerrosストア（ステータスコードを保管しておくためのストア）のステートにレスポンスに含まれるステータスコードを保存します。

errorsストアにコミットしてミューテーションを呼ぶ（上のコード参照）

Vue.js
if( response.status !== CREATED) {
  this.$store.commit('error/setCode', response.status)
}

errorsストアでステータスコードをステートにセットする

error.js
const state = {
  code: null
}
const mutations = {
  setCode(state, code) {
    state.code = code
  }
}
export default {
  namespaced: true,
  state,
  mutations,
}

App.vue（ルートコンポーネント）がerrosストアを監視 => ページの切り替え

App.vue


computed: {
  errorCode () {
    return this.$store.state.error.code
  }
},
watch: {
  errorCode: {
    handler (val) {
      //認証エラー
      if (val === UNAUTHORIZED) {
        this.$router.push('/refresh-token')
        this.$store.commit('auth/setUser', null)
        this.$router.push('/401')
      }
      //権限エラー
      else if (val === FORBIDDEN ) {
        this.$router.push('/403')
      }
      //トークンエラー
      else if (val === TOKEN_ERROR) {
        this.$router.push('/refresh-token')
        this.$store.commit('auth/setUser', null)
        this.$router.push('/419')
      }
      //システムエラー
      else if (val === INTERNAL_SERVER_ERROR) {
        this.$router.push('/500')
      }
      //存在しないページのエラー
      else {
        this.$router.push('/not-found')
      }
    },
    immediate: true
  },
  $route () {
    this.$store.commit('error/setCode', null)
  }
}

算出プロパティ（computed）を用いて、errorsストアのステートの値（デフォルトはnull）を算出してもらいます。
その算出プロパティを監視し、算出結果に変更が見られたとき、watchオプションの中の処理が実行されます。
その算出結果（ステータスコード）に応じて条件分岐をし、そのステータスコードに応じたページに切り替えます。

ページが切り替わったあとは、errorsストアのステートをnullに戻しておきます。

以上でエラーレスポンスを受け取った際に、そのステータスコードに応じてページを切り替えることができました！

最後に

ここまで読んでいただきありがとうございました。
誰かの参考に少しでもなれば幸いです。
何かミスや理解不足の部分がありましたら、気軽にコメントください。