Question

我有一个React + redux + axios应用程序，白色jwt身份验证。因此，我需要截取每个请求到服务器并使用令牌设置标头。问题是我必须设置此标头，或实现拦截器。（另外，我需要在范围内使用redux存储来从商店获取令牌）。我的想法 - 在Index组件中实现它。这是对的吗？

Answer 1

我建议你设置标题axios.defaults.headers.common.authorization。看看Global axios defaults。如果您需要一个有效的例子，this公共回购可以帮助您。

Answer 2

为什么必须手动设置标题。你不能只将JWT存储在cookie中，然后浏览器会自动转发它。只需确保在HTTP选项中传递credentials: 'include'。

Answer 3

我建议你参考redux-thunk。

你必须创建api-wrapper-helper以将redux-thunk注入extra argument，然后从redux操作访问api-wrapper-helper。

api-wrapper-helper是一个将url和方法作为参数获取并向api-server发送请求然后返回结果的函数。（您可以在此文件中设置标题）

例如，您可以看到ApiClient.js的react-redux-universal-hot-example boilerplate。

Answer 4

创建redux-middleware来执行这些操作。

除了interceptor到add header token之外，你也做request/response transformation。

此外，如果您不想退回承诺和结果，则可以提及您要next action结果的dispatch。

Middleware为您提供to get the store state和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})        
       })
    }

将中间件与商店集成。

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

Answer 5

这是一篇很旧的文章，但它获得了一些见解，因此类似的方法可以很好地工作并且易于测试。

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
};

您可以将jwt存储在localstorage中，然后从那里检索它以在页眉中设置

React + axios + redux拦截器

5 个答案: