在 React/Redux 应用程序中从何处获取 JWT 令牌答案

【问题标题】：Where to get JWT token in React/Redux app在 React/Redux 应用程序中从何处获取 JWT 令牌
【发布时间】：2018-06-16 04:34:14
【问题描述】：

我需要尽早从我的后端获取JWT token。在哪里进行 API 调用的正确位置，以便我在 React/Readux 应用程序的生命周期早期处理这个问题？

【问题讨论】：

你的意思是你需要登录用户吗？因为为此您可以将 JWT 存储在 localStorage 中。正常的方法是在初始化应用的 app.js 中执行请求。
我不认为app.js是最早的一点。我在应用程序中使用中间件，当我单步执行代码时，在我到达app.js 之前发生了很多事情。我的一些中间件在初始化过程中需要这个JWT Token。这就是为什么我想弄清楚在哪里处理这个问题。它真的需要从一开始就发生。

标签： reactjs redux react-redux

【解决方案1】：

您可以向您的routes.js 添加一个函数，该函数将调用 API 来获取令牌。然后你可以在进入你的应用程序时调用这个函数（通过 react-router onEnter 属性）。

如果您使用的是 react-router this 帖子可以提供帮助。

...
function requireToken(){
  // Make API call to get token
};

export default(
  <Router history={browserHistory}>
    <Route path="login" component={LoginPage} />
    <Route path="/" component={App} onEnter={requireToken}>
      <Route path="/dashboard" component={Dashboard} />
      ...
    </Route>
  </Router>
)

【讨论】：

我认为在routes 之前执行的configureStore() 函数呢？我试过了，它有效。只是想看看这是否是一个糟糕的地方。我认为它不会产生有害影响，但不确定代码是否优雅。

【解决方案2】：

我感觉你在处理 react 和 redux 的方式上有些问题。即使没有令牌，您的应用程序也应该可以正常呈现。如果你有一个依赖于该令牌的商店（或者可能是一个减速器），这是不行的。我建议重新考虑引导并使其不需要外部数据。这将改善 UX 和开发人员体验，因为您可以单向思考。

【讨论】：

应用或商店不需要令牌。整个应用程序要求用户进行身份验证。因此，当用户通过应用程序从后端 API 请求数据时，我需要知道用户是谁以及他有权请求他请求的数据。放入configureStore的目的是为了尽早处理token。
很清楚为什么需要令牌，但为什么不先渲染然后触发检查用户是否经过身份验证的逻辑。您甚至可以提供加载屏幕或其他内容。您的登录屏幕是如何呈现的。
我的 React 客户端没有处理登录。