使用刷新令牌获取新的访问令牌反应和节点 js

时间:2021-06-20 08:48:06

标签: node.js reactjs authentication jwt http-status-code-401

我已经构建了一个用于用户身份验证的 JWT API。我想在反应中使用它。 我的应用有以下路线:

Node js API 路由:

  • http://localhost:8080/api/auth/signin -> 此路由接受来自 react 的用户名和密码,并发送回一个访问令牌以进行 react,它将把它保存在 localstorage 中(我打算使用内存代替)和包含刷新的 cookie启用了 httpOnly 的令牌。

  • http://localhost:8080/api/auth/signup -> 此路由将根据用户输入向数据库添加新用户(与身份验证过程无关)

  • http://localhost:8080/api/auth/refreshtoken -> 此路由将根据客户端发送的刷新令牌返回一个新的访问令牌,该令牌保存在 cookie 中。然后客户端将用过期的访问令牌替换它。

  • http://localhost:8080/api/test/user -> 这将检查用户是否使用来自客户端的访问令牌登录并将用户数据发回

React 客户端路由:

  • http://localhost:3000/login -> 发送登录用户信息的路由

  • http://localhost:3000/register -> 创建新用户的路径

  • http://localhost:3000/user -> 需要用户登录才能查看数据的受保护路由。

当我登录到我的网站时,我可以在访问令牌到期前 20 秒看到用户路由中的数据。当访问令牌过期并且我执行新请求时,服务器将使用 401 未经授权的代码进行响应。这样我就可以确保访问令牌已过期并且我需要使用刷新令牌。我已经这样做了:

const API_URL = "http://localhost:8080/api/test/";

const getUserBoard = () => {
  return axios.get(API_URL + "user", { headers: authHeader() })
            .catch((error) => {
              if(error.response.status === 401) {
                // if error response status was 401 then request a new token
                authService.refreshToken();
                window.location.reload();
              }else if(error.response.status === 403) {
                authService.logout();
                window.location.href = "/login";
              }
            });
};

使用刷新令牌获取新访问令牌的代码:

const refreshToken = () => {
  axios({
    url: API_URL + "refreshtoken",
    method: "POST",
    withCredentials: true
  })
    .then((response) => {
      if(response.data.accessToken) {
        const user = JSON.parse(localStorage.getItem("user"));
        user.accessToken = response.data.accessToken;
        localStorage.setItem("user", JSON.stringify(user));
      }
    })
    .catch((error) => {
      console.log("server: " + JSON.stringify(error.response));
    })
}

用于设置使用访问令牌从服务器接收数据的标头的代码:

export default function authHeader() {
    const user = JSON.parse(localStorage.getItem('user'));
  
    if (user && user.accessToken) {
      // for Node.js Express back-end
      return { 'x-access-token': user.accessToken };
    } else {
      return {};
    }
}  

在 401 错误时获取新访问令牌的第一部分效果很好,但我的刷新令牌也会在 40 秒后过期。 如果我发送过期的刷新令牌,它不会返回新的访问令牌。正因为如此,我将再次收到 401 错误,这将再次导致 403 错误,在这里我将陷入无限重载循环。

有什么想法吗?我如何控制令牌的到期时间?

1 个答案:

答案 0 :(得分:1)

您正在 node.js 应用程序中发布令牌,对吗?所以这就是你应该调整令牌到期时间的地方。发行令牌的代码应该有一个选项来设置过期时间。

请记住,一旦刷新令牌过期,您应该重新登录。您可以实现称为滚动刷新令牌的东西。因此,每当您调用 /api/auth/refreshtoken 端点时,您还可以发出新的刷新令牌、新的过期时间并将其返回到 cookie 中。

相关问题