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

编程问答 2022-05-02

问题描述

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

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

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

解决方法

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

import { AppContext } from '../DashBoard'

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

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

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

cookiescookiesexpressexpressexpressmernreactjsreactjsreactjsreactjs