Question

我正在尝试找出构建React / Redux应用程序的最佳方法，该应用程序主要使用swagger client进行api访问。

问题是我不完全确定在哪里存储对swagger客户端的引用。登录并获取JWT身份验证令牌后，我需要告知所有后续请求添加授权头。使用axios这是微不足道的，因为它会持续存在它的标题，除非另有说明。似乎招摇客户端没有这样做。理想情况下，我会在登录时创建一个swagger客户端，添加标题信息并仅为将来的所有请求引用它（这也只是在单页应用程序中获取模式json一次）。

由于我是在一个动作的上下文中这样做的，最好将Swagger客户端存储在Redux存储中（我将如何实现）？或者我会在Redux之外创建它的静态实例吗？

// app init
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
const store = createStoreWithMiddleware(reducers);
export const swaggerClient = { instance: authService.createFromState().then(() => {
    ReactDOM.render(
       <Provider store={store}></Provider>
       ...
    );
});

做一些登录的东西，创建一个swagger客户端：

// redux action
import { swaggerClient } from '../index';
// ... do login, get bearerToken
Swagger({
    url: 'https://localhost/swagger/v1/swagger.json',
    requestInterceptor(req) {
      req.headers['Authorization'] = `Bearer ${bearerToken}`;
      return req;
    }
}).then((client) => {
    // store reference for all future ajax calls
    swaggerClient.instance = client;
});

如果刷新页面，我们需要从本地存储中的bearerToken重建swagger客户端

// authService
import { swaggerClient } from '../index';
function createFromState() {
  // if authentication is known from localstorage, we can rebuild
  // a swagger client
  if(isAuthenticated()) {
    const authentication = getAuthentication();
    return Swagger({
      url: 'https://localhost/swagger/v1/swagger.json',
      requestInterceptor(req) {
        req.headers['Authorization'] = `Bearer ${authentication.bearerToken}`;
        return req;
      }
    }).then((client) => {
      swaggerClient.instance = client;
      return client;
    });
  }
}

如果这是正确的方向，可能是一个新手问题，我有点困惑。在从localstorage恢复时，等待swagger客户端加载似乎是一种疯狂的方式（为了防止未来呼叫的竞争条件）。

React / Redux和Swagger客户端

0 个答案: