React Redux App中的JWT取消身份验证

Question

我遇到了一个小问题，无法解决如何在React / Redux应用程序中以最有效的方式取消对用户的身份验证。 （以及使用Redux Thunk）。

从服务器获取令牌很容易。 目前我：

- Send POST request with email and pw
- Receive Token back from server
- Save it to local storage.

之后对服务器的任何其他请求都需要在AUTHORIZATION标头内附加令牌，这很好。

可以说，我在登录一段时间后离开了应用程序，然后回来尝试尝试查看另一条受保护的路由。 让我们将此路由称为“ / latest-videos”，它发出AJAX请求以获取最新视频。

发送该请求后，服务器将确定我的令牌已过期，并且将不允许我访问此资源。 显然，这是我要在Redux中实现某种类型的动作创建者的地方，它将继续并将用户重定向到登录页面。

我是否需要对每个AJAX请求执行某种类型的检查，以查看令牌是否已过期？ 似乎这样做会在我编写的AJAX请求的每个文件中都需要不必要的样板。

这就是让我感到困惑的地方。 如果我们假设令牌具有预定的到期日期， 那么我该如何以最有效的方式取消对用户的身份验证，而不会用糟糕的代码设计选择来填充我的应用程序？

您可以假设我的应用程序中有一个名为“ actions”的文件夹，其中包含如下文件：

- actions
   - videos.js
   - users.js
   - projects.js
   - ...

在actions文件夹内的给定文件中，您可以具有多个执行AJAX调用的Thunk。 这是其中之一的样板示例：

export function fetchVideos(query) {
  return async (dispatch) => {
    try {
      dispatch({ type: FETCH_VIDEOS })

      let res = await axios.post(`${API_URL}/videos/search`, {
        query: query
      })
      // dispatch some success action creator with the data
    }
    catch(e) {
      console.error('ERROR FETCHING VIDEOS: ' + e)
      dispatch({ type: FETCH_VIDEOS_FAILED })
    }
  }
}

希望我有道理...任何帮助将不胜感激。

Answer 1

无需在您的React应用中检查令牌。 您的服务器应该是在每次请求时都会检查令牌的有效性/到期时间的服务器。

由于我们正在谈论的是客户端应用程序消耗了宁静的api调用，因此服务器应该是在无效令牌上限制资源并返回401未经授权的响应的服务器。

收到该响应后，客户端应用程序应取消用户身份验证并重定向到登录页面（或发送刷新令牌请求（如果有的话），以避免不必要的登录操作）。