在 React Redux 应用程序中使用 OAuth2 刷新令牌

Question

我有一个已实施 OAuth2 的应用程序。它工作正常，但我在这里对 refresh_tokens 感到困惑。我的应用程序使用 React + Redux 组合。

我知道我需要检查我的 access_token 是否过期，然后使用 refresh_token 请求新的。好的...但是我应该什么时候刷新它？在 401 发生之后或某些需要授权的 API 请求准备就绪时（就在发送之前）？

我也知道如何使用 HTTP 拦截器在发送或检测 401 响应之前获取所有 API 请求。问题是我很困惑如何解决 Redux 流程中的问题。如何"freeze"请求刷新令牌的时间？或者当我在 401 响应上解决问题时如何重复请求？

Answer 1

当第一次成功通过服务器验证时，我们将有{access_token、expires_in、refresh_token}。我们将 access_token 和 expires_in 存储在本地存储的 session storage 和 refresh_token 中。

每当获取 access_token 以获取数据时（您应该 enhance/wrap 填充 access_token 的获取），您将检查 expires_in 是否即将到期（较少超过 1 分钟，或者你觉得舒服什么），然后我们使用 refresh_token 来请求新的 access_token。当然，我们也必须将新结果更新到存储中。

伪代码：

function getToken() {
    const expiresIn = storage.getItem(KEY_EXPIRES_IN);
    const accessToken = storage.getItem(KEY_ACCESS_TOKEN);
    if (accessToken
        && (!expiresIn || moment.unix(Number(expiresIn)).diff(moment(),   'minute') > 1)) {
        return accessToken;
    }
    return refreshToken();
}

每次向服务器发出请求时都会调用上述函数。

P/S：您可能希望将其作为与同构获取

一起使用的承诺

在 React Redux 应用程序中使用 OAuth2 刷新令牌

Using OAuth2 refresh token in React Redux app

reactjs

oauth-2.0

redux

redux-framework