Nuxt.js + Auth0 + Spring Boot で作る認証付きSPA 【 vol.5 完結編 】

## ここまでのおさらい
[前回](https://qiita.com/mijinco0612/items/c564b80a491e4065213e)まででサーバサイドの作成が完了しました。
今回はNuxtとspringを結合してアプリケーションを完成させましょう。

## axiosの準備
http clientにaxiosを使用します。
また、Nuxtのアプリケーションは3333で起動しSpringは28080で起動します。
:28080/apiへのリクエストを解決するためにNuxtのproxyモジュールを使用します。
併せてcross-envも追加しておきます。

```bash:terminal
 cd ~/study-auth0/nuxt-auth0/  #Nuxtプロジェクトルートへ移動
 yarn add @nuxtjs/axios @nuxtjs/proxy
 yarn add --dev cross-env
```
package.jsonを編集しNODE_ENVの設定を追加します。

```json:package.json
  "scripts": {
    "dev": "cross-env NODE_ENV=development HOST=0.0.0.0 PORT=3333 nuxt",

```
[nuxt.config.js](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/e7a6af5786a66ecb289e0b45db057d94a08e3adb#diff-7d1641065fb3365f32d1446a034d5609)を編集し proxyの設定を切り替えます。

```javascript:nuxt.config.js

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ]
}

if (process.env.NODE_ENV === 'development') {
  config.proxy = {
    '/api': 'http://localhost:28080'
  }

```

##　proxyの動作確認をします。
index.vueを編集して`ping public`と`ping private`というボタンを設置します。
また、返却されたメッセージを表示する領域も追加します。

```vue:index.vue
        </nuxt-link>
      </div>
      <div class="field is-grouped">
        <p class="control">
          <button class="button is-info is-outlined" @click="pingPublic">ping public</button>
        </p>
        <p class="control">
          <button class="button is-link is-outlined" @click="pingPrivate">ping private</button>
        </p>
      </div>

      <div class="box">
        <article class="media">
          <div class="media-content">
            <div class="content">
              {{message}}
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

<script>
  export default {
    data: () => ({
      message: null
    }),
    methods: {
      loggedIn() {
        return this.$auth0.isAuthenticated();
      },
      async pingPublic() {
        const returnMessage = await this.$axios.$get('/api/v1/public');
        this.message = returnMessage;
      },
      async pingPrivate() {
        const returnMessage = await this.$axios.$get('/api/v1/private');
        this.message = returnMessage;
      }
    }
  };
</script>
```

この時点でそれぞれのアプリケーションを起動して動作確認してみましょう。
![kyodo.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/82787/d56d2c4e-b74d-e851-2a59-f082fd0823d2.gif)



まだ、リクエスト時にAuthorizationヘッダにidTokenを設定していないので
認証の可否関係なく`ping private`へのリクエストは　401が返ってきていますね。

##idTokenをAuthorizationヘッダに追加する。
では、認証後のidTokenがLocal storageに保存されているので、それを用いてAuthorizationヘッダに設定しましょう。

[auth0.jsにLocalStorageからidTokenを取得するメソッドを追加します。](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/267498c08f0de5724010d0e6c2a11e88323c07b9)

```javascript:auth0.js
  getIdToken() {
    return this.isAuthenticated() ? localStorage.getItem('idToken') : null
  }
```

[index.vueのpingPrivateメソッドにAuthorizationヘッダを設定する処理を追加します](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/eb28c0e7dcd756605e9e0c8ab41323c45afbbc94)
~~＊ヘッダの設定はキレイにできるかとおもいますが、検証用のためにとりあえずここでやってしまっています。（ごめんなさい）~~
[修正しました](https://qiita.com/mijinco0612/items/d9948af125fb975a4e59)

```javascript:index.vue
async pingPrivate() {
        this.$axios.setHeader('Authorization', 'Bearer ' + this.$auth0.getIdToken()); //追加
        const returnMessage = await this.$axios.$get('/api/v1/private');
        this.message = returnMessage;
      }
```


## 再度動作確認してみましょう

![kannryo.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/82787/048f498d-5fc1-466e-876b-1d5debbaa5b0.gif)

できた！

認証後のみ`ping private`がメッセージを返してきていますね。

## まとめ
簡単ですが、以上で【Nuxt.js + Auth0 + Spring Boot で作る認証付きSPA】は終わりです。
auth0にはまだまだたくさんの機能が備わっています。
これが何かのきっかけになってくだされば幸いです。

また、全般に渡って下記を大変参考にさせていただきました。
https://booth.pm/ja/items/830458
購入する価値が確実にあると私は思います。
この場を借りて素晴らしい本を発行してくださった[ころころぶっくす様](https://corocn.booth.pm/)に感謝の気持ちお伝えできたらと思います。
重ねて本当にありがとうございました。

## おまけ

以下にAuthorizationヘッダの設定や、エラー時の処理などを修正した内容をまとめました。

[axios Interceptorsを使用して共通処理を作る。](https://qiita.com/mijinco0612/items/d9948af125fb975a4e59)