处理 cookie 中 JWT 令牌以进行客户端身份验证的正确方法

Question

我有一个后端，在成功验证后会使用 JWT 令牌进行响应。但是，出于安全目的，cookie 在客户端是不可见的。现在在前端我使用react。我创建了一个设置和获取令牌的功能组件。我了解到，存储 JWT 令牌的最佳方法是将其保存为 cookie 并从服务器端激活 HTTPOnly。我的问题是为了保护 JWT 令牌，如果激活了 HTTPOnly（这使得 cookie 不可见），如何在前端正确保存 cookie？我打算使用cookie来检查用户是否已经登录。只是为了让您了解我正在做的事情，我添加了下面的组件。

export default function useToken() {
    const getToken = () => {
        const tokenString = localStorage.getItem("token"); // I will refactor localstorage to cookie
        const userToken = JSON.parse(tokenString as string);
        return userToken;
    }

    const [token, setToken] = useState<string>(getToken());

    const saveToken = (userToken: string) => {
        localStorage.setItem("token", JSON.stringify(userToken)); // I will refactor localstorage to cookie
        setToken(userToken)
    }
    return {
        setToken: saveToken, 
        token
    }
}


......

  const { token, setToken } = useToken()
  return (
    <div className="app">
      <Header />
      <Footer />

      <Router>
        <Routes>
          <Route path="/login" element={!token ? <Login setToken={setToken} /> : <Navigate to="/" />} />

.....

Answer 1

要检查用户是否已经登录，一种常见的方法是：

只要后端的一个请求返回 HTTP 401，就认为用户已注销。

此外，这还取决于您的前端是否位于 CDN 中或在页面加载时访问服务器。对于后一种情况，您可以在服务器端找到它。

然后，为了处理身份验证，您的服务器可以在收到请求时从 cookie 中读取 JWT 令牌。