CODEWITHSUNDEEP
reactjsreact-reduxjwtaxiosinterceptor
Артем Мирошниченко
Артем Мирошниченко

Reputation: 339

React + axios + redux interceptors

I have an React + redux + axios app, white jwt authentication. So, i need to intercept every request to server and set header with token. The question is where I have to set this headers, or implement interceptors. (also, i need redux store in scope, to get tokens from store). My idea - implement it in the Index component. Is it right way?

Upvotes: 3

Views: 15775

Answers (5)

Shashwat Gupta
Shashwat Gupta

Reputation: 5264

//  Interceptor
axios.interceptors.response.use(function (response) {
// success case here
    return response
}, function (error) {

// Global Error Handling here
//    showErrorToaster(error['message']);
    return Promise.reject(error.response.data)
})

Upvotes: 0

click2install
click2install

Reputation: 998

This is an old post but its getting a few views, so something like this would work nicely and is easily testable.

apiclient.js

import axios from 'axios';

import { setRequestHeadersInterceptor } from './interceptors';

const apiClient = axios.create(
{
  baseUrl: 'https://my.api.com',
  timeout: 3000
});

apiClient.interceptors.request.use(setRequestHeadersInterceptor);

export default apiClient;

interceptors.js

export const setRequestHeadersInterceptor = config =>
{
   // have each interceptor do one thing - Single Responsibility Principle
};

you should store your auth details in a httpOnly secure cookie, the transmission to/from the server will be automatic then

Upvotes: 0

Adam
Adam

Reputation: 1754

Why do you have to manually set the header. Can't you just store the JWT in a cookie and then the browser will forward it automatically for you. Just make sure you pass credentials: 'include' in your HTTP options.

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

create a redux-middleware to do these things.

Apart from acting like interceptor to add header token, you also do request/response transformation.

Also,you can mention the next action to which you want to dispatch the result if you don't want to return the promise and result.

Middleware gives you a chance to get the store state and also fetch & dispatch other action 

const apiInterceptor = store => next => action => {

      if(action.type !== 'ajax') return next(action)

      const state = store.getState();

      state.token // get token here

      //add this api check part in some other module.
      if(action.api=='UPDATE_CLIENT') 
        {
          method = 'post';
          url  = 'some url';
        }
      else
      {
        method = 'get';
        url  = 'other url';
      }


      fetch(url, {
        method: method,
        headers : 'add token here',
        body: JSON.stringify(action.body())
      })
      .then(response => response.json())
      .then(json => json)//either return result
      //OR dispatch the result
       .then(json => {

         dispatch({type:action.next_action,payload : json})        
       })
    }

Integrate the middleware with store.

import customMiddleware from './customMiddleware'
const store = createStore(
  reducer,
  applyMiddleware(customMiddleware)
)

Upvotes: 0

Rafael Sousa
Rafael Sousa

Reputation: 731

I suggest you to set the header axios.defaults.headers.common.authorization. Take a look here Global axios defaults. If you need a working example, this public repo can help you out.

Upvotes: 1

Related Questions