Attach Authorization header for all axios requests

by

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 🙂

More Related Contents:

  1. Handling async request with React, Redux and Axios?
  2. Axios get in url works but with second parameter as object it doesn’t
  3. axios post request to send form data
  4. What is mapDispatchToProps?
  5. why do you need to bind a function in a constructor
  6. What is use of curly braces in an ES6 import statement?
  7. How to overcome the CORS issue in ReactJS
  8. How can I persist redux state tree on refresh?
  9. What is the best way to redirect a page using React Router? [closed]
  10. Can I dispatch an action in reducer?
  11. Axios having CORS issue
  12. how to cancel/abort ajax request in axios
  13. React – Display loading screen while DOM is rendering?
  14. Sending the bearer token with axios
  15. When do I choose React state Vs Redux Store
  16. Use Connect or pass data as props to children
  17. Redux: Why is avoiding mutations such a fundamental part of using it?
  18. ReactJS lifecycle method inside a function Component
  19. Element type is invalid: expected a string (for built-in components) or a class/function
  20. Use history.push in action creator with react-router-v4?
  21. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  22. How does connect work without mapDispatchToProps
  23. React: Parent component re-renders all children, even those that haven’t changed on state change
  24. How to fix 431 Request Header Fields Too Large in React-Redux app
  25. React and TypeScript—which types for an Axios response?
  26. how to set initial state in redux
  27. My Redux state has changed, why doesn’t React trigger a re-render?
  28. How do I see state when logging to the console instead of Proxy object inside reducer action?
  29. react native post form data with object and file in it using axios
  30. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes

Leave a Comment