在反应中使用刷新令牌获取新的访问令牌

Question

我的 django 后端带有 user/token/refresh 的 url 当我在正文中点击刷新令牌时，它发送此令牌的位置

{
    "access": "access_token",
    "refresh": "refresh_token"
}

访问令牌的有效期为 5 分钟。当有人登录时，他们会同时获得令牌，我将它们保存在本地存储中。但5分钟后，他们刷新并获得新的access_token和refresh_token。我有这个端点与 redux 的 createApi

 refreshToken: builder.mutation({
      query: (refreshToken) => {
        return {
          url: "user/token/refresh/",
          method: "POST",
          body: { refresh: refreshToken },
          headers: {
            "Content-type": "application/json",
          },
        };
      },
    }),

当有人登录时，我正在使用此功能来存储数据

const storeToken = (value) => {
  if (value) {
    const { access, refresh } = value;
    localStorage.setItem("access_token", access);
    localStorage.setItem("refresh_token", refresh);
  }
};
const getToken = () => {
  let access_token = localStorage.getItem("access_token");
  let refresh_token = localStorage.getItem("refresh_token");
  return { access_token, refresh_token };
};

现在我如何以及在哪里实现代码以每 5 分钟检查一次并使用这些令牌从后端刷新这两个令牌。是 App.jsx 吗？有已登录/未登录用户的页面，我该怎么做？我尝试过使用 chatgpt 但没有成功。

Answer 1

理想情况下，您想要创建一个 middleware.js 并覆盖其中的所有路由。您可以创建一个钩子，检查本地存储发送一个布尔值并将其添加到您的中间件，然后如果数据不存在，中间件会将用户重定向到登录页面，或者如果数据存在于本地存储中，则不会执行任何操作。