为所有请求动态设置 header (React, super-agent)

Question

我想要一种优雅的方式来为所有请求动态设置身份验证 header。我当前的解决方案是使用 superagent-defaults 包，但它不处理动态 headers

拿下面的示例代码

superagentWrapper.js

import defaults from 'superagent-defaults';
import localStorage from 'localStorage';

const superagent = defaults();

superagent
  .set('Authorization', `Bearer ${localStorage.getItem('access_token')}`);

export default superagent;

api.js

  import request from '../../../utils/superagentWrapper';

  ExampleAuthenticatedCall: (x) => {
    return new Promise((resolve, reject) => {
      request
     .post(sources.exampleCall())
     .accept('json')
     .set('Content-Type', 'application/json')
     .timeout(40000)
     .send({ exampleCall: "xxx"})
     .end((error, res) => {
        res.body.error ? reject(res.body.error) : resolve(res.body);
     });
    });
  },

所以问题是我的所有 api 文件在页面加载时都需要我的 superAgentWrapper。这意味着只要 access_token 永不更改（在页面刷新之前它可能会多次更改），该示例就可以正常工作。

我在这里 https://www.crowdsync.io/blog/2017/10/16/setting-defaults-for-all-your-superagent-requests/ 找到了这个问题的解决方案。

虽然这可能会奏效，但理想的解决方案是动态镜像请求库拥有的所有方法，而不是必须手动定义它们（将来可能会添加/删除新方法，所以这种方法有点脆弱).

也许任何人都可以通过使用代理/反射为我指明正确的方向？

Answer 1

使用标准 superagent，而不是 return 发送相同的请求，return 一个生成新请求并从 [=14] 获取当前令牌的函数=]:

import request from 'superagent';
import localStorage from 'localStorage';

const superagent = () => request
  .set('Authorization', `Bearer ${localStorage.getItem('access_token')}`);

export default superagent;

用法（参见request and promises）：

import request from '../../../utils/superagentWrapper';

AuthenticatedCall: (x) => request() // generate a new request
  .get(sources.AuthenticatedCall(x)) // a request returns a promise by default

如果您不想将包装器转换为函数，则可以使用 proxy with a get handler。代理将在调用时使用当前令牌生成新请求：

import request from 'superagent';
import localStorage from 'localStorage';

const handler = {
  get: function(target, prop, receiver) {
    return request
      .set('Authorization', `Bearer ${localStorage.getItem('access_token')}`)[prop];
  }
};

const requestProxy = new Proxy(request, handler);

export default requestProxy;

用法（参见request and promises）：

import request from '../../../utils/superagentWrapper';

AuthenticatedCall: (x) => request // generate a new request
  .get(sources.AuthenticatedCall(x)) // a request returns a promise by default

为所有请求动态设置 header (React, super-agent)

Dynamically Set header for all requests ( React, super-agent )

javascript

http

superagent

reactjs