Attach Authorization header for all axios requests

Question

I have a react redux application that fetches a token from an api server  After the user authenticates I d like to make all axios requests have that token as an Authorization header without having to manually attach it to every request in the action  I m fairly new to react redux and am not sure on the best approach and am not finding any quality hits on google   Here is my redux setup      actions js import axios from  axios    export function loginUser props      const url    https   api mydomain com login      const   email  password     props    const request   axios post url    email  password        return       type  LOGIN USER      payload  request         export function fetchPages          here is where I d like the header to be attached automatically if the user      has logged in       const request   axios get PAGES URL      return       type  FETCH PAGES      payload  request            reducers js const initialState       isAuthenticated  false    token  null     export default  state   initialState  action    gt      switch action type        case LOGIN USER           here is where I believe I should be attaching the header to all axios requests        return           token  action payload data key          isAuthenticated  true              case LOGOUT USER           i would remove the header from all axios requests here        return initialState      default        return state          My token is stored in redux store under state session token   I m a bit lost on how to proceed  I ve tried making an axios instance in a file in my root directory and update import that instead of from node modules but it s not attaching the header when the state changes  Any feedback ideas are much appreciated  thanks

User · Answer

Try to make new instance like i did below

var common_axios = axios.create({
    baseURL: 'https://sample.com'
});

// Set default headers to common_axios ( as Instance )
common_axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// Check your Header
console.log(common_axios.defaults.headers);

How to Use it

common_axios.get(url).......
common_axios.post(url).......

User · Answer

There are multiple ways to achieve this  Here  I have explained the two most common approaches     1  You can use axios interceptors to intercept any requests and add authorization headers      Add a request interceptor axios interceptors request use function  config        const token   store getState   session token      config headers Authorization    token       return config        2  From the documentation of axios you can see there is a mechanism available which allows you to set default header which will be sent with every request you make   axios defaults headers common  Authorization     AUTH TOKEN    So in your case   axios defaults headers common  Authorization     store getState   session token    If you want  you can create a self-executable function which will set authorization header itself when the token is present in the store    function          String token   store getState   session token       if  token             axios defaults headers common  Authorization     token         else            axios defaults headers common  Authorization     null             if setting null does not remove  Authorization  header then try                 delete axios defaults headers common  Authorization                               Now you no longer need to attach token manually to every request  You can place the above function in the file which is guaranteed to be executed every time  e g  File which contains the routes    Hope it helps

User · Answer

The point is to set the token on the interceptors for each request import axios from  quot axios quot        const httpClient   axios create       baseURL   quot http   youradress quot          baseURL  process env APP API BASE URL       httpClient interceptors request use function  config        const token   localStorage getItem  token        config headers Authorization    token    Bearer   token             return config

User · Answer

Sometimes you get a case where some of the requests made with axios are pointed to endpoints that do not accept authorization headers  Thus  alternative way to set authorization header only on allowed domain is as in the example below  Place the following function in any file that gets executed each time React application runs such as in routes file   export default      gt        axios interceptors request use function  requestConfig            if  requestConfig url indexOf  lt ALLOWED DOMAIN gt    gt  -1                const token   localStorage token              requestConfig headers  Authorization      Bearer   token                       return requestConfig         function  error            return Promise reject error

User · Answer

If you want to call other api routes in the future and keep your token in the store then try using redux middleware   The middleware could listen for the an api action and dispatch api requests through axios accordingly   Here is a very basic example   actions api js  export const CALL API    CALL API    function onSuccess payload      return       type   SUCCESS       payload         function onError payload      return       type   ERROR       payload      error  true         export function apiLogin credentials      return       onSuccess      onError      type  CALL API      params       credentials        method   post       url   login           middleware api js  import axios from  axios   import   CALL API   from     actions api    export default    getState  dispatch      gt  next   gt  async action   gt         Ignore anything that s not calling the api   if  action type     CALL API        return next action             Grab the token from state   const   token     getState   session        Format the request and attach the token    const   method  onSuccess  onError  params  url     action     const defaultOptions         headers          Authorization  token    Token   token                       const options            defaultOptions         params         try       const response   await axios method  url  options       dispatch onSuccess response data        catch  error        dispatch onError error data           return next action

User · Answer

export const authHandler    config    gt      const authRegex       apiregex      if   authRegex test config url         return store fetchToken   then  token    gt          Object assign config headers common    Authorization   Bearer   token             return Promise resolve config                 return Promise resolve config       axios interceptors request use authHandler    Ran into some gotchas when trying to implement something similar and based on these answers this is what I came up with  The problems I was experiencing were   If using axios for the request to get a token in your store  you need to detect the path before adding the header  If you don t  it will try to add the header to that call as well and get into a circular path issue  The inverse of adding regex to detect the other calls would also work If the store is returning a promise  you need to return the call to the store to resolve the promise in the authHandler function  Async Await functionality would make this easier more obvious If the call for the auth token fails or is the call to get the token  you still want to resolve a promise with the config

User · Answer

Similarly  we have a function to set or delete the token from calls like this    import axios from  axios    export default function setAuthToken token      axios defaults headers common  Authorization           delete axios defaults headers common  Authorization       if  token        axios defaults headers common  Authorization        token            We always clean the existing token at initialization  then establish the received one

User · Answer

If you use  axios     0 17 1  version you can do like this   Create instance of axios      Default config options   const defaultOptions         baseURL   lt CHANGE-TO-URL gt       headers           Content-Type    application json                     Create instance   let instance   axios create defaultOptions         Set the AUTH token for any request   instance interceptors request use function  config        const token   localStorage getItem  token        config headers Authorization    token    Bearer   token             return config          Then for any request the token will be select from localStorage and will be added to the request headers   I m using the same instance all over the app with this code   import axios from  axios    const fetchClient        gt      const defaultOptions         baseURL  process env REACT APP API PATH      method   get       headers           Content-Type    application json                     Create instance   let instance   axios create defaultOptions         Set the AUTH token for any request   instance interceptors request use function  config        const token   localStorage getItem  token        config headers Authorization    token    Bearer   token             return config           return instance      export default fetchClient      Good luck

User · Answer

The best solution to me is to create a client service that you ll instantiate with your token an use it to wrap axios   import axios from  axios    const client    token   null    gt        const defaultOptions             headers                Authorization  token    Token   token                                return           get   url  options         gt  axios get url       defaultOptions     options             post   url  data  options         gt  axios post url  data       defaultOptions     options             put   url  data  options         gt  axios put url  data       defaultOptions     options             delete   url  options         gt  axios delete url       defaultOptions     options                const request   client  MY SECRET TOKEN     request get PAGES URL     In this client  you can also retrieve the token from the localStorage   cookie  as you want

[reactjs] Attach Authorization header for all axios requests

Examples related to reactjs

Examples related to redux

Examples related to axios