Question

我使用vanilla flux和一些utils来与我的API进行通信。

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

我有一个LocalStorageUtils.js库，用于与window.localStorage进行互动。我的容器组件处理所有登录/注销操作，并在页面加载时读取当前用户。

App.js

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

LocalStorageUtils读取该值并通过类似于flux chat example的ServerAction将其带入Flux。

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

这会将用户放入我的UserStore并进入我的视图，在那里我可以显示用户名和一些注销链接等。

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

我可以在我ApiUtils的{{1}}内调用一些方法，但感觉不对。或者，当我在容器组件中发生更改事件时，是否必须再次往返？

Answer 1

您应该将用户作为数据传递到ApiUtils课程，并且无需关心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/的所有提示。

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

2 个答案: