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调用的Thunks。以下是其中一个可能的样板示例：

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

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

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

根据该响应，客户端应用程序应取消验证用户并重定向到登录页面（如果您有任何避免不必要的登录操作，则发送带有刷新令牌的请求）。

React Redux App中的JWT解除身份验证

1 个答案: