Inject an Authorization header into a redux-api-middleware request with a Redux middleware.
import { CALL_API } from 'redux-api-middleware'
import ls from 'local-storage'
export default function() {
return function(next) {
return function(action) {
const callApi = action[CALL_API]
// Check if this action is a redux-api-middleware action.
if (callApi) {
// Inject the Authorization header from localStorage.
callApi.headers = Object.assign({}, callApi.headers, {
Authorization: ls.get('id_token') || '',
})
}
// Pass the FSA to the next action.
return next(action)
}
}
}
// ...Likely some other imports such as React etc.
import { createStore, applyMiddleware } from 'redux'
import { apiMiddleware } from 'redux-api-middleware'
// Our custom middleware.
import apiAuthInjector from './apiAuthInjector'
const store = createStore(
reducers,
applyMiddleware(
apiAuthInjector, // Put it somewhere before `apiMiddleware`.
apiMiddleware,
)
)
// ...the rest of your app setup.
import { CALL_API } from 'redux-api-middleware'
export function fetchLocations() {
return {
[CALL_API]: {
endpoint: 'http://api.somesite.com/api/locations',
method: 'GET',
// Don't have to manually add the Authorization header to every request.
headers: { 'Content-Type': 'application/json' },
types: ['REQUEST', 'SUCCESS', 'FAILURE']
}
}
}