こんにちは！kossyです！
さて、今回はaxiosのinterceptorsを使って、HTTPリクエストの際に処理を挟む方法を検証してみたいと思います。
環境
Vue 3.0.5
Vue CLI 4.5.9
npm 6.14.8
node 14.15.0
axios 0.21.1
TypeScript 3.9.7
方法
リクエストの際にTokenをRequestHeaderに仕込みたいとします。
簡易的な例としては、以下になると思います。
import axios from 'axios' axios.interceptors.request.use(config => { config.headers = { 'access-token': localStorage.getItem('access-token') } return config })
ローカルストレージに認証トークンが保存されていると仮定して、
axios.interceptors.request.use()でheadersにaccess-tokenを仕込んでいます。
簡易的な例では上記で十分かと思いますが、例えばページによってはリクエスト内にトークンを仕込みたくないこともあるでしょう。
その場合は、routerインスタンスの情報で処理を分岐させるやり方があります。
import axios from 'axios' import router from '@/router' axios.interceptors.request.use(config => { if (router.currentRoute.value.meta?.requiresAuth) { config.headers = { 'access-token': localStorage.getItem('access-token') } } return config })
VueRouterを導入している場合、ルーティングにmeta情報を付与することができます。
この仕組みを使って、リクエスト発火時のルーティングのmeta情報を見に行って、認証が必要なページだった場合はTokenを仕込むようにしています。
勉強になりました。
