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
   - ...

在操作文件夹内的给定文件中，您可以有多个执行 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 应用中检查令牌。您的服务器应该在每次请求时检查您的令牌的有效性/到期时间。

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

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