Question

我们正在构建基于Web的应用程序，使用React并使用基于REST的服务器。提出的问题是如何最好地管理以前经过身份验证的连接变得未经身份验证以及是否存在任何React或React / Redux设计模式？

之前的设计曾使用过会话，但由于REST服务器是无状态的，因此当前的REST服务器设计可能会如下所示：

POST /auth/authenticate  --> Authenticate and provides a token
DELETE /auth/token       --> Invalidates the token, black-list token
PUT  /auth/token         --> Renews token, if still valid
GET  /auth/token         --> Indicates if token is still valid

在客户端，当前的草案设计是使用我们自己的函数包装fetch函数来处理检查响应状态，然后调用客户端服务以使状态无效并重定向到登录页面或执行Redux也是如此。我们还希望添加一个间隔计时器来检查我们拥有的令牌，然后如果'exp'字段存在并且过去则自动执行相同的操作。

我们此时所拥有的功能是（它不会考虑令牌的重新验证，此时，为了防止激活'会话'到期）：

function handleFetchResponse(fetchResponse) {
    let newResponse;
    try {
        return fetchResponse.then((response) => {
            newResponse = response;
            const contentType = response.headers.get('content-type');
            if (contentType && contentType.indexOf("application/json") !== -1) {
                    return response.json();
            } else if (response.status === 200) {
                return response.blob();
            } else {
                if (response.status === 401) {
                    forceLogout();
                }
                throw new RequestError(response.statusText, response.status);
            }
        }).then((responseBody) => {
            if (newResponse.status === 401) {
                forceLogout();
                return;
            } else if (newResponse.status !== 200) {

                if (responseBody) {
                    throw new RequestError(
                        responseBody.details ||
                        newResponse.statusText,
                        newResponse.status
                    );
                }
                throw new RequestError(newResponse.statusText, newResponse.status);
            }

            return responseBody;
        });
    } catch (error) {
        console.error('handleFetchResponse:error', error);
        return Promise.resolve(err)
            .then((err) => {
                throw err;
            })
    }
}

它将通过以下方式调用：

return handleFetchResponse( fetch(...) );

这是一个可接受的设计，还是他们改进的方法？

在基于React的应用程序中处理JWT令牌到期？

0 个答案: