Nuxt.js + Auth0 + Spring Boot로 만드는 인증 첨부 ​​SPA 【vol.5 완결편】

여기까지의 오사이

지난번까지 서버 측 작성이 완료되었습니다.
이번에는 Nuxt와 spring을 결합하여 애플리케이션을 완성합시다.

axios 준비

http client에 axios를 사용합니다.
또한 Nuxt 응용 프로그램은 3333에서 시작하고 Spring은 28080에서 시작합니다.
:28080/api에 대한 요청을 해결하기 위해 Nuxt 프록시 모듈을 사용합니다.
아울러 cross-env도 추가해 둡니다.

terminal

 cd ~/study-auth0/nuxt-auth0/  #Nuxtプロジェクトルートへ移動
 yarn add @nuxtjs/axios @nuxtjs/proxy
 yarn add --dev cross-env

package.json을 편집하고 NODE_ENV 설정을 추가합니다.

package.json

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

nuxt.config.js 을 편집하여 프록시 설정을 토글합니다.

nuxt.config.js

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

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

프록시의 동작 확인을 합니다.

index.vue를 편집하여 ping public 및 ping private라는 버튼을 설치합니다.
또한 반환된 메시지를 표시하는 영역을 추가합니다.

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>

이 시점에서 각각의 어플리케이션을 기동해 동작 확인해 봅시다.


아직 요청시 Authorization 헤더에 idToken을 설정하지 않았기 때문에
인증 여부와 상관없이 ping private에 대한 요청은 401이 반환되었습니다.

idToken을 Authorization 헤더에 추가합니다.

그럼, 인증 후의 idToken가 Local storage에 보존되어 있으므로, 그것을 사용해 Authorization 헤더에 설정합시다.

auth0.js에 LocalStorage에서 idToken을 검색하는 메소드를 추가합니다.

auth0.js

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

index.vue의 pingPrivate 메서드에 Authorization 헤더를 설정하는 처리를 추가합니다.
＊헤더의 설정은 깨끗하게 할 수 있을까라고 생각합니다만, 검증용을 위해서 우선 여기에서 해 버리고 있습니다. (미안해)
수정됨

index.vue

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

다시 동작을 확인합시다.

할 수 있었다!

인증 후에만 ping private가 메시지를 반환하고 있습니다.

요약

간단합니다만, 이상으로【Nuxt.js + Auth0 + Spring Boot 로 만드는 인증 첨부 ​​SPA】는 끝입니다.
auth0에는 여전히 많은 기능이 있습니다.
이것이 무언가의 계기가 되어 주시면 다행입니다.

또, 전반에 걸쳐 다음을 매우 참고로 했습니다.
htps : // 보오 th. pm/그럼/있어 ms/830458
구매 가치가 확실하다고 생각합니다.
이 자리를 빌려 멋진 책을 발행해 주신 어쩌면
겹쳐서 정말 고마워요.

덤

이하에 Authorization 헤더의 설정이나, 에러시의 처리등을 수정한 내용을 정리했습니다.

axios Interceptors를 사용하여 공통 처리를 만듭니다.