Axios 攔截器示範

在 axios 中可以自訂攔截器，可以在發出請求和回應前取得資料和加工，例如發送前增加身分驗證的 JWT Token 、或是建立日誌分析等等。

基礎攔截器程式碼:

    
// 攔截請求
axios.interceptors.request.use(config => {
    console.log(`interceptors request, url: ${config.url}`);
    return config;
}, error => {
    return Promise.reject(error);
});

// 攔截回應
axios.interceptors.response.use(response => {
    console.log(`interceptors response, url: ${response.config.url}`);
    return response;
}, error => {
    return Promise.reject(error);
});
    

假設使用者登入的 API 會回傳 Token ，且除了登入以外的所有 API 都需要附加 Token ，則可以在 response 的攔截器中增加檢查 url 是登入的 API 且呼叫成功時，自動全域設定 Token。
我們也順便在 request 的攔截器中檢查所有發出的 header ，確認是否有真的帶入 token

    
// 攔截請求
axios.interceptors.request.use(config => {

    // get header
    const headers = config.headers;
    console.log(`interceptors request, url: ${config.url}, headers: ${JSON.stringify(headers)}`);

    return config;
}, error => {
    return Promise.reject(error);
});

// 攔截回應
axios.interceptors.response.use(response => {
    console.log(`interceptors response, url: ${response.config.url}`);

    // 如果是登入 API ，就將 token 放到 header
    if (response.config.url === '/api/user/login') {
        console.log(`interceptors response, url: ${response.config.url}, token: ${response.data.token}`);
        axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.token}`;
    }

    return response;
}, error => {
    return Promise.reject(error);
});


async function callApi() {

    // 測試沒有 token 時攔截器會不會確實沒有 token
    await axios.get('/api/front/user', {})
        .then(
            response => {
                console.log(`response: ${JSON.stringify(response)}`);
            },
            error => {
                console.error(`error: ${JSON.stringify(error)}`);
            }
        )

    // 登入
    await axios.post(`/api/user/login`, {
            username: 'ruyut',
            password: 'ruyut',
            apiKey: '62E64F9CEF214F2635B5D9468C5D2',
        }
    );

    // 測試是否自動帶入登入時取得的 token
    await axios.get('/api/front/user', {})
        .then(
            response => {
                console.log(`response: ${JSON.stringify(response)}`);
            },
            error => {
                console.error(`error: ${JSON.stringify(error)}`);
            }
        )
}

callApi();
    

回應:

    
// 第一個沒有 token 的測試 API
interceptors request, url: /api/front/user, headers: {"Accept":"application/json, text/plain, */*"}
interceptors response, url: /api/front/user
response: no token

// 登入 API
interceptors request, url: /api/user/login, headers: {"Accept":"application/json, text/plain, */*"}
interceptors response, url: /api/user/login
interceptors response, url: /api/user/login, token: aaa.bbb.ccc

// 已經自動帶入登入時取得的 token
interceptors request, url: /api/front/user, headers: {"Accept":"application/json, text/plain, */*","Authorization":"Bearer aaa.bbb.ccc"}
interceptors response, url: /api/front/user
response: [{"id":1,"name":"Ruyut"}]
    

參考資料：
axios - Interceptors