时间戳

首页 > 解决方案 > 在 MERN 中，我如何在客户端管理 JWT cookie？

reactjs - 在 MERN 中，我如何在客户端管理 JWT cookie？

问题描述

谁能向我解释如何在 MERN 堆栈中使用 cookie？我正在尝试为社交媒体做一个模拟。我了解第一步，但随后 - 我不知道如何进行。

  1. 我为登录、注册、注销创建端点。
  2. 我创建了反应应用程序并制作了注册表单，登录表单。从那里 - 我正在向我的快速端点发送 axios 请求。
  3. 在快递 - 我正在保存到 MongoDB 用户或从数据库检查登录名 + 密码。
  4. 我正在创建一个带有 id 有效负载的 JWT 令牌并通过 cookie 发送它。

但接下来我该怎么办？如何保存在反应应用程序中登录的用户？以及如何检查用户是否仍然登录并且 cookie 是否存在？谢谢你的帮助！

标签： reactjsexpresscookiesmern

解决方案

我有一个repo，它可以完成你想要做的大部分事情。在名为SignInForm.js的 React 组件中，我使用 POST 请求对用户进行身份验证。如果身份验证成功，服务器会设置一个名为“token”的 cookie，然后客户端会重定向到名为Dashboard.js 的组件。 在 Dashboard.js 中，除其他外，我有以下代码行：

import {useCookies} from 'react-cookie'

export const AppContext = createContext()

export default function DashBoard() {

    const [cookies, setCookie, removeCookie] = useCookies(['token'])
    let [authenticated, setAuthenticated] = useState(cookies.token !== undefined)
    
    return (
        <AppContext.Provider value={{authenticated, setAuthenticated}}>

上面的代码查找名为“token”的 cookie。如果它存在，那么它将 authenticated 设置为 true 并将其加载到 AppContext 提供程序中。服务器 API 路由当然是受保护的服务器端。但是客户端我可以在其他组件中使用 authenticated 的值来允许或禁止访问。例如在一个名为UserForm.js的组件中，我像这样检查身份验证（为清楚起见，删除了一些代码）：

import { AppContext } from '../DashBoard'

export default function UserForm(){
    let { authenticated, setAuthenticated} = useContext(AppContext)

    if(!authenticated){
        document.location = '/signin'
        return <></>
    }

如果它们没有经过身份验证，那么我会将它们重定向到 SignIn.js 组件。

推荐阅读