如何使用本地存储中的令牌发出初始身份验证请求？

Question

我正在使用香草助焊剂和一些 utils 来与我的 API 交流。

在初始页面加载时，我想从本地存储中读取一些令牌，然后向我的 API 发出请求以获取我的数据。

我有一个 LocalStorageUtils.js 库用于与 window.localStorage 交互。我的容器组件处理所有 login/logout 操作并在页面加载时读取当前用户。

App.js

componentWillMount() {
  LocalStorageUtils.get('user');
}

LocalStorageUtils 读取值并通过 ServerAction 将其带入 Flux，类似于 flux chat example.

get(key) {
  var value = window.localStorage.getItem(key);
  if (value) { 
    ServerActionCreators.receiveFromLocalStorage(key, value); 
  }
}

这会将用户放入我的 UserStore 和我的视图中，我可以在其中显示用户名和一些注销 link 等

我还有 ApiUtils.js 从服务器请求数据。所以问题是：我在哪里告诉 ApiUtils 我在初始页面加载时有一个登录用户？

我可以从 LocalStorageUtils 中调用 ApiUtils 中的某些方法，但感觉不对。或者，每当我在容器组件中收到更改事件时，我是否必须进行另一次往返？

Answer 1

您应该将用户作为数据传递给您的 ApiUtils class 并且无需担心您的 ApiUtils 是如何被使用的。

var ApiUtils = function () {
   this.get = function (endpoint, data) {
      return theWayYouSendAjaxRequests.get(endpoint).setData(data);
   };
};

// Wherever your ApiUtils is used.
var api = new ApiUtils();
api.get('/me', {user: userFromStore});

Answer 2

我找到了一个可行且感觉不错的解决方案。

由于从本地存储中获取数据是同步的，因此无需通过 ServerActionCreators 通过 Flux 传输数据。只需使用 LocalStorageUtils 获取当前用户并调用该用户的 login 方法。 login 操作与用户最初登录时使用的操作相同。login 触发从服务器获取新数据。新数据保存在我的DataStore，用户保存在我的UserStore.

感谢 Twitter 和 https://reactiflux.slack.com/ 的所有提示。

如何使用本地存储中的令牌发出初始身份验证请求？

How to make initial authenticated request with token from local storage?

flux

reactjs

reactjs-flux