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

Question

我有一个后端在身份验证成功后以 JWT 令牌响应。但是，出于安全目的，cookie 不能从客户端可见。现在在前端我使用反应。我创建了一个设置和获取令牌的功能组件。我了解到存储 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

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

只要来自后端的一个请求 returns HTTP 401，用户就被视为注销。

此外，这取决于您的前端是在 CDN 中还是在页面加载时访问服务器。在后一种情况下，你可以找到它 server-side.

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

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

Correct way to handle JWT tokens in cookies for authentication on the client-side

cookies

spring-security

setcookie

reactjs