javascript 使用Redux中间件将Authorization标头注入到redux-api-middleware请求中。

Posted 2021-05-04

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']
    }
  }
}

// ...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'
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)
    }
  }
}