私は、API呼び出しに大きく依存するVue.jsアプリを構築しています。私はaxiosを使って電話をかけています。私はこれに似たパターンを使用しています。基本的に、すべてのコンポーネントで共有されるサービスを作成しました。以下はサービスです：
//api-client.js
import axios from 'axios'
import store from '../src/store'
let authKey = store.getters.getAuthKey
export default axios.create({
withCredentials: false, // This is the default
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: "Basic "+authKey
}
})
ここで、ゲッターを使用してvuexストアの認証トークンを取得し、サービスに設定していることに注目してください。
私はこのサービスを次のように使用します：
//App.vue
<template>
<div>
<!-- some code -->
</div>
</template>
<script>
import apiClient from "../api-client.js"
export default {
mounted(){
apiClient.get("#url").then(()={
// Do Something
})
}
}
</script>
<style lang="scss">
</style>
状況は、認証キーが時々変更されるので、ストアの認証キーを更新する設定があります。この設定により、ストア内の認証キーは正常に更新されますが、api-client.js内のキーは更新されません。これは1回だけ読み込まれ、ストア内の更新はこのapi-client.jsにカスケードされません。
これを解決するためのパターンはありますか？提案してください。
トークンは動的であるため、axiosインスタンスのファクトリヘッダー設定でトークンを定義することはできません。これをグローバルに処理する最良の方法は、リクエストインターセプターを使用することです
//api-client.js
import axios from 'axios'
import store from '../src/store'
const apiClient = axios.create({
withCredentials: false, // This is the default
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
});
apiClient.interceptors.request.use(function (config) {
// Do something before request is sent
let authKey = store.getters.getAuthKey
config.headers["Authorization"] = "Basic " + authKey;
return config;
});
export default apiClient;
このようにして、インターセプター関数はリクエストごとに発生し、最新バージョンのauthKey;を取得します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加