How to re import a function - reactjs

Question

I make a class to create an axios api service. inside this class I fetch token(I got it from server and set it on cookie) from cookie.

const api = axios.create({
  headers: {
    common: {
      'Content-Type': 'application/json'
    },
    post: {

    }
  }
});


const cookies = parseCookies()
const token = cookies.token;
if (token && token !== 'undefined') {
  api.defaults.headers.common['Authorization'] = 'Bearer ' + token
}

because I import this api service from above component:

import api from "../../../services/httpService";

after login user, for another api calls cookie is null .

I think I have two solutions:

I pass token to each api call like:

  const config = {
     headers: { Authorization: `Bearer ${cookies.token}` }
 };
  api.get('profile',config).then((res) => {

I don't want use this solution.

re-create api import (but I don't know how I can).

Viet · Accepted Answer · 2021-08-14 09:22:02Z

1

When login success, you set token for cookies. And you should update a token for axios instance in this step.

// ... set token in cookies
api.defaults.headers.common['Authorization'] = 'Bearer ' + token

And you don't need this logic when create instance:

const cookies = parseCookies()
const token = cookies.token;
if (token && token !== 'undefined') {
  api.defaults.headers.common['Authorization'] = 'Bearer ' + token
}

answered Aug 14, 2021 at 9:22

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to re import a function - reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related