【Nuxt × JWT】axiosでトークン認証後、初回アクションメソッド実行時にHTTPリクエストに認証情報が付けられない

Question

いつもお世話になっております。

NuxtでJWTを利用したログイン認証の勉強をしているのですが、
ページを開いて初回ログイン後のUser情報取得で認証エラーが発生してしまいます。

ログイン画面

エラー内容

流れとしては、
ログイン時(store/auth.js/login())に返ってきたトークンを即時ローカルストレージに保存し、
axiosの通信時にリクエストヘッダーに自動でトークンを付与するように設定。

その後、User情報(store/auth.js/reload())を取得しようとしているのですが、
ページを開いて初回ログインボタン押下後は必ずUser情報を取得しようとすると401(認証エラー)が発生します。

もう一度ログインボタンを押すと、問題なくUser情報の取得が可能です。

また、一度ログアウトを押して、ローカルストレージに保存しているトークンを削除後、
再度ログインボタンを押下すると問題なくUser情報の取得が可能です。

手順	結果
ページを開いて初回「ログインボタン押下」	401エラー
２回目以降「ログインボタン押下」	正常終了
ログアウトボタン押下後、「ログインボタン押下」	正常終了

エラー自体は、store/auth.js/reloao() に記述している this.$axios.get( URL )で発生しているのですが、
なぜ初回のみエラーが出るのかがわかりません。
どなたか原因が分かる方がいらっしゃったらご教授いただけると幸いです。

宜しくお願い申し上げます。

ソースコード

plugins/axios.js

export default function( {store, $axios} ){

  $axios.onRequest( ( config ) => {

    const token = localStorage.getItem( 'access' )

    if ( token ){

      console.log( "" );
      console.log( "$axios.setToken 実行！" );

      $axios.setToken( token, 'JWT' )

    } else {
      console.log( "" );
      console.log( "localStorageにtokenがありません！ たぶん初回(アクセストークン取得時)! 初回はreload()がなぜか失敗する！" );
    }

  } )


  $axios.onResponse( response => {
    return Promise.resolve( response );
  } )


  $axios.onError( error => {


    let messages;

    if ( error.response.status === 400 ){


      /*  バリデーションエラー  */
      console.log( "バリデーションエラー" );

      let messages = [].concat.apply( [], Object.values( error.response.data ) )
      store.dispatch( 'message/setWarningsMessages', {messages: messages} )


    } else if ( error.response.status === 401 ){


      /*  認証エラー  */
      console.log( "認証エラー" );

      const token = localStorage.getItem( 'access' )

      if ( token != null ){
        messages = 'ログイン有効期限切れ'
      } else {
        messages = '認証エラーです。'
      }

      console.log( "$axios.onError で auth/logout()実行！" );

      store.dispatch( 'auth/logout' )
      store.dispatch( 'message/setErrorMessages', {messages: messages} )


    } else if ( error.response.status === 403 ){


      /*  権限エラー  */
      console.log( "権限エラー" );

      messages = '権限エラーです。'
      store.dispatch( 'message/setErrorMessages', {messages: messages} )


    } else if ( error.response.status === 500 ){


      /*  その他のエラー  */
      console.log( "その他のエラー" );

      messages = '想定外のエラーです。'
      store.dispatch( 'message/setErrorMessages', {messages: messages} )


    }

    return Promise.reject( error.response );

  } )

}

store/auth.js

export const state = () => ( {

  username: '',
  authenticated: false

} )


export const getters = {

  username: state => state.username,
  authenticated: state => state.authenticated,

}


export const mutations = {

  set: ( state, payload ) => {

    state.username = payload.user.username
    state.authenticated = true

    console.log( '[state.username] : ' + state.username );
    console.log( '[state.authenticated] : ' + state.authenticated );

  },


  clear: ( state ) => {

    state.username = ''
    state.authenticated = false

  },

}

export const actions = {

  /*  ログイン  */
  login( context, payload ){

    const params = new URLSearchParams();

    params.append( 'username', payload.username );
    params.append( 'password', payload.password );


    const URL = '/auth/jwt/create/'

    this.$axios.post( URL, params )
      .then( res => {

        // 認証用トークンをlocalStorageに保存
        localStorage.setItem( 'access', res.data.access )

        context.dispatch( 'reload' ).then( user => user )

      } )
  },


  /*  ログアウト  */
  logout( context ){

    localStorage.removeItem( 'access' )
    context.commit( 'clear' )

  },


  /*  ユーザー情報更新  */
  reload( context ){

    const URL = '/auth/users/me/'

    return this.$axios.get( URL ).then( ( res ) => {

      const user = res.data

      context.commit( 'set', {user: user} )
      return user

    } )

  }

}

pages/index.vue

<template>
  <div>

    <input v-model="form.username" placeholder="username">
    <input v-model="form.password" placeholder="password" type="password">

    <button @click="login">ログイン</button>
    <button @click="logout">ログアウト</button>

  </div>
</template>

<script>
export default {

  data(){
    return {

      form: {
        username: '',
        password: '',
      }

    }
  },


  methods: {

    async login(){
      await this.$store.dispatch( 'auth/login', this.form )
    },

    async logout(){
      await this.$store.dispatch( 'auth/logout' )
    }

  }

}
</script>

<style>
input {
  border        : 1px solid #ccc;
  border-radius : 5px;
  display       : block;
  padding       : 3px;
  margin-bottom : 10px;
}
</style>

Answer 1

下記と同様の問題です。
https://teratail.com/questions/297147

$axios.onRequest(config => {
  config.headers.Authorization = `Bearer ${token}`
  return config
})

Comments

[matsuo_basho]

yuhigashさん、ありがとうございます！！