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

【问题标题】：How to make initial authenticated request with token from local storage?如何使用来自本地存储的令牌发出初始身份验证请求？
【发布时间】：2015-09-12 07:15:03
【问题描述】：

我正在使用带有一些 utils 的香草助焊剂来与我的 API 进行通信。

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

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

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 并进入我的视图，在那里我可以显示用户名和一些注销链接等。

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

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

【问题讨论】：

标签： reactjs reactjs-flux flux

【解决方案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});

【讨论】：

您会在何时何地获得用户？以及如何将其放入 Flux 中？

【解决方案2】：

我找到了一个行之有效的解决方案。

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

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

【讨论】：