【個人用メモ】Nuxt.jsでFirebaseAuth認証と連携したAPIサーバとの通信にaxiosを使う

概要

Nuxt.js で API サーバーへアクセスするとき、自分は plugins ディレクトリにラッパーを作ってアクセスしている。その時、Bearer トークン等もまとめて渡せるように実装して使いまわしているので、ここでメモをしておく。(かなり雑なので個人用メモとして投稿)

条件

• Content-Type は application/json と multipart/form-data に限定
• APIサーバURLは https://example.org/v1/example の形になる (v1部分は変更可能)
• HTTPヘッダで Firebase の idToken を Bearer トークンの形で送信
• エンドポイントは環境変数に保存している (cross-envを利用)

axios側の実装

plugins ディレクトリに実装する。

rest_gateway.js

import axios from 'axios'

// URIやHeadersは固定なのでここでaxiosをラップする
export default class {
  constructor(path, params, idToken, allowStatus = null, version='v1') {
    this.uri = process.env.apiEndpoint + version + '/' + path;
    this.params = params;
    this.headers = {
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + idToken
    }

    this.validateStatus = (status) => {
      const normal = status >= 200 && status < 300;
      if (allowStatus === null) return normal;
      return normal || status === allowStatus;
    }
  }

  get() {
    return axios.request({
      method: 'get',
      url: this.uri,
      params: this.params,
      headers: this.headers,
      validateStatus: this.validateStatus
    })
  }

  post() {
    return axios.request({
      method: 'post',
      url: this.uri,
      data: this.params,
      headers: this.headers,
      validateStatus: this.validateStatus
    })
  }

  put() {
    return axios.request({
      method: 'put',
      url: this.uri,
      data: this.params,
      headers: this.headers,
      validateStatus: this.validateStatus
    })
  }

  delete() {
    return axios.request({
      method: 'delete',
      url: this.uri,
      data: this.params,
      headers: this.headers,
      validateStatus: this.validateStatus
    })
  }

  postForm() {
    this.headers['Content-Type'] = 'multipart/form-data'
    return this.post()
  }

  putForm() {
    this.headers['Content-Type'] = 'multipart/form-data'
    return this.put()
  }
}

ラッパー利用側の実装

import RestGateway from '@/plugins/rest_gateway'
// ...
 try {
    const idToken = await firebase.auth().currentUser.getIdToken(true);
    const response = await new RestGateway('<path>', {param1: value1, params2: value2}, idToken).get();
    console.log(response.data.key);
  } catch (error) {
    if (error.response) {
      // 200以外の処理はここで行う (例として403を用いている)
      if (error.response.status === 403) { }
    }
    // それ以外の場合のエラー
    window.alert("エラーが発生しました: " + error);
    console.error(error);
  }