axiosのpluginを設定して、Request時に必ずトークンを渡す方法

システム開発Tips

Auth0を使用してJWTの認証を行う際にクライアントサイドからトークンを渡す箇所を一箇所にしたいと思い以下のようにしました。

/plugin/axios.jsに以下の記述を追加します。

  import axios from 'axios';
  export default function({ $axios, store }) {
    $axios.onRequest((config) => {
      axios.defaults.headers['Authorization'] = store.$auth.$storage._state['_token.auth0'];
      return config;
    })
  }

参考

最初は以下のように書いてましたが、interceptorsが聞かなかったので上記のように直しました。

export default function({ $axios, store }) {
    $axios.interceptors.request.use(config => {
      config.headers['Authorization'] =  store.$auth.$storage._state['_token.auth0'];
      return config
    })
}

★追記
SSRでやってる場合、nuxt.config.jsに以下の記述を書かないとうまいこと動作しないっぽいです。

  plugins: [
    { src: '@/plugins/axios', mode: 'client' }
  ]

フォローお願いします!

コメント

タイトルとURLをコピーしました