Установить заголовки на основе условия в Javascript

Question

Я работаю над реагирующим приложением, в котором я проверяю наличие токена в локальном хранилище, исходя из наличия токена, мне нужно установить заголовки.

Я попытался сначала инициализировать объект JavaScript вне цикла, а затем установить заголовки в условие if else.

getAllTopics() {
       const token = localStorage.getItem('authKey');
       var config = {};

       if(token){
         const URL = API_URL + `api/get-home-ideas-auth`;
          var config = {
           'Accept' : 'application/json',
           'Authorization' : `Bearer ` + token
       }

       } else {
         const URL = API_URL + `api/get-home-ideas`;
            var config = {
           'Accept' : 'application/json'
       }

       }
         axios.get(URL, {headers : config})
           .then(res => {
             if (res.data && res.data.status === 1) {
               const topics = res.data.data;
               console.log(topics);
               this.setState({ topics: topics, showloader:false});
             } 

           })
           .catch(e => {console.error(e); throw e;});
       }

Я получаю ошибку Cannot GET /function URL()[nativecode]

Answer 1

Это ограниченная проблема, проблема в том, что вы инициализируете новую переменную config внутри блоков if-else вместо ссылки на уже определенную вне области. Новая переменная config недоступна вне частной области действия if-else . Внешний config фактически никогда не обновляется.

Просто обратитесь к оригиналу config примерно так:

getAllTopics() {
   const token = localStorage.getItem('authKey');
   var config = {};
   var URL = '';
   if(token){
     URL = API_URL + "api/get-home-ideas-auth";
      config = {
         'Accept' : 'application/json',
         'Authorization' : `Bearer ${token}`
      }

   } else {
     URL = API_URL + "api/get-home-ideas";
        config = {
          'Accept' : 'application/json'
        }
   }

     axios.get(URL, {headers : config})
       .then(res => {
         if (res.data && res.data.status === 1) {
           const topics = res.data.data;
           console.log(topics);
           this.setState({ topics: topics, showloader:false});
         } 

       })
       .catch(e => {console.error(e); throw e;});
   }

Answer 2

Хотя уже ответили, самый чистый способ сделать это через перехватчики :

/**
 * Create an Axios Client with defaults
 */
const client = axios.create({
  baseURL: API.BASE_URL,
});

/*
* Request interceptor
* Useful for refreshing token before to make a new request and get 401 responses
*/
client.interceptors.request.use(
  config => {
    const originalRequest = _.cloneDeep(config);
    // Using lodash _.set() we avoid undefined keys in path
    _.set(originalRequest, 'headers.Authorization', getAuth());
    return originalRequest;
  },
  err => Promise.reject(err),
);

Answer 3

getAllTopics() {
   const token = localStorage.getItem('authKey');
   const URL = API_URL + `api/get-home-ideas-auth`;
   var config = {
   'Accept' : 'application/json',
   ...(token && {'Authorization' : `Bearer ` + token})
  }

     axios.get(URL, {headers : config})
       .then(res => {
         if (res.data && res.data.status === 1) {
           const topics = res.data.data;
           console.log(topics);
           this.setState({ topics: topics, showloader:false});
         } 

       })
       .catch(e => {console.error(e); throw e;});
   }