Axiosで401（認証エラー）を処理して反応する方法は？

Question

私はaxios ajaxリクエストのラッパーを含んでいる1つのファイルrequest.jsを持っています。複数の反応コンポーネントからrequest関数を呼び出していますが、要求の1つが失敗したときに、トークンを更新して失敗した要求を再試行したい。私は、インターセプターを使用することができますが、私はそれを実装する方法を知らない。助けてください。

request.js

var client = axios.create({ 
    baseURL: 'http://192.168.1.3:3000', 
    headers: { 
    appID: 8, 
    version: "1.1.0", 
    empID: localStorage.getItem('empID'), 
    token: localStorage.getItem('accessToken') 
    } 
}); 

const request = function(options) { 
const onSuccess = function(response) { 
console.debug('Request Successful!', response); 
return response.data; 
} 
const onError = function(error) { 
    console.error('Request Failed:', error.config); 
    if (error.response) { 
    console.error('Status:', error.response.status); 
    console.error('Data:', error.response.data); 
    console.error('Headers:', error.response.headers); 
    } else { 
    console.error('Error Message:', error.message); 
} 

    return Promise.reject(error.response || error.message); 
} 

return client(options) 
     .then(onSuccess) 
     .catch(onError); 
     options 
} 

export default request; 

Answer 1

あなたはここに401エラーを処理するためにインターセプタを使用する場合は、コードスニペットです。

axios.interceptors.response.use(response => { 
    return response; 
}, error => { 
    if (error.response.status === 401) { 
    //place your reentry code 
    } 
    return error; 
}); 

Answer 2

私は、開発者がHTTP Requestためxhrまたはaxiosを使用する理由私は理解できない、それはコード

import axios from 'axios'; 
import config from '../../configuration.json'; 
import qs from 'qs'; 

const baseURL = config['baseUrl_local']; 
let authTokenRequest; 

/** 
    * @description axios instance for ajax requests 
*/ 

var client = axios.create({ 
baseURL: baseURL, 
headers: { 
    appID: 8, 
    version: "1.1.0", 
    empID: localStorage.getItem('empID'), 
    token: localStorage.getItem('accessToken') 
} 
}); 

/** 
* @description this method calls a requestNewToken method to issue a 
new token to the client 
*/ 

function getAuthToken() { 
    if (!authTokenRequest) { 
    authTokenRequest = requestNewToken(); 
    authTokenRequest.then(resetAuthTokenRequest, resetAuthTokenRequest); 
} 
return authTokenRequest; 
} 

/** 
    * @description this method requests the server to issue a new token, 
    the server response is updated in local storage accessToken 
*/ 

function requestNewToken() { 
    var newToken = request({ 
    method: "post", 
    url: '/sign-in', 
    data: qs.stringify({ 
     "userName":localStorage.getItem('userName'), 
     "password":localStorage.getItem('password') 
     }) 
    }).then((res)=>{ 
    if(res.status == "success"){ 
    localStorage.setItem('accessToken',res.data.accessToken); 
    //if featureArray is present in response object, update the 
    featureArray in local storage 
    if(res.data.features){ 
     localStorage.setItem(
     'featureArray', 
    JSON.stringify(res.data.features)); 
    } 
    client = axios.create({ 
    baseURL: baseURL, 
    headers: { 
      appID: 8, 
      version: "1.1.0", 
      empID: localStorage.getItem('empID'), 
      token: localStorage.getItem('accessToken') 
     } 
    }); 
} else { 
    window.location = "/logout"; 
} 
}); 
return newToken; 
} 

function resetAuthTokenRequest() { 
    authTokenRequest = null; 
} 

/** 
    * @description if any of the API gets 401 status code, this method 
    calls getAuthToken method to renew accessToken 
    * updates the error configuration and retries all failed requests 
    again 
*/ 

client.interceptors.response.use(undefined, err => { 
    const error = err.response; 
    // if error is 401 
    if (error.status===401 && error.config && 
    !error.config.__isRetryRequest) { 
    // request for a new token 
    return getAuthToken().then(response => { 
    // update the error config with new token 
    error.config.__isRetryRequest = true; 
    error.config.headers.token= localStorage.getItem("accessToken"); 
    return client(error.config); 
    }); 
} 
}); 

/** 
* @description wrapper for making ajax requests 
* @param {object} object with method,url,data etc. 
*/ 

const request = function(options) { 
    const onSuccess = function(response) { 
    return response.data; 
    } 
const onError = function(error) { 
    //console.error('Request Failed:', error.config); 
    if (error.response) { 
    //console.error('Status:', error.response.status); 
    //console.error('Data:', error.response.data); 
    //console.error('Headers:', error.response.headers); 
    } else { 
    console.error('Error Message:', error.message); 
    } 
return Promise.reject(error.response || error.message); 
} 

return client(options) 
     .then(onSuccess) 
     .catch(onError); 
     options 
} 

export default request; 

Answer 3

次の作業です。 reactアプリの最善の方法はFetch APIです。それはきれいで清潔です。 Fetch APIを使用して、以下の例を参照：

(async function fetchAsync() { 
    let data = await (await fetch(`https://httpbin.org/get`,{ 
           method: `GET`, 
           headers: { 
            'authorization': 'BaseAuth W1lcmxsa=' 
           } 
          })).json(); 
         console.log(data); 
})(); 

：より良い方法または async/await方法[ es2017]で

fetch(`https://httpbin.org/get`,{ 
    method: `GET`, 
    headers: { 
     'authorization': 'BaseAuth W1lcmxsa=' 
    } 
}).then((res)=>{ 
    if(res.ok) { 
     return res.json(); 
    } 
}).then((res)=>{ 
    console.log(res); // It is like final answer of XHR or jQuery Ajax 
}) 

を