如何在 Nextjs 中使用 Cookie 来保留用户

使用 LocalStorage

在 React 或单页应用程序中，有很多方法可以持久化用户。很多时候，开发人员通常使用 localStorage 来存储用户数据，并在需要时从中加载数据。虽然这种方法有效，但它并非最有效的方式，因为它使用户容易受到攻击。使用 Cookie 稍微安全一些，尽管它仍然不是最安全的选择。就我个人而言，我更喜欢混合使用 Cookie 和 JWT 的JSON Web 令牌（带有有效期）来持久化用户会话，并在会话过期时强制用户重新登录。使用 JWT 超出了本文的讨论范围。

由于服务器端未定义 LocalStorage（因为服务器上不存在 localStorage），因此在渲染路由之前无法访问 localStorage。因此，我们最好的选择是在渲染路由之前在服务器端检查用户的 Cookie 是否有效。

开始在 React/NextJS 中使用 cookie

要在 NextJS 中使用 Cookie，我们需要安装两个软件包。在本教程中，我们将使用cookie和react-cookie。React -cookie允许我们从客户端设置 Cookie，而cookie包允许我们从服务器端访问已设置的 Cookie。运行以下命令安装这两个软件包：

npm install react-cookie cookie

Cookie-cutter是一个小型包，其功能与 react-cookie 相同。

设置 Cookie

安装完这两个软件包后，就该设置 Cookie 了。通常，我们会在用户成功登录或注册我们的应用后为其设置 Cookie。要在登录时设置 Cookie，请按照以下示例操作。

// pages/login.js
import { useCookies } from "react-cookie"

const Login = () => {
  const [cookie, setCookie] = useCookies(["user"])

  const handleSignIn = async () => {
    try {
      const response = await yourLoginFunction(username) //handle API call to sign in here.
      const data = response.data

      setCookie("user", JSON.stringify(data), {
        path: "/",
        maxAge: 3600, // Expires after 1hr
        sameSite: true,
      })
    } catch (err) {
      console.log(err)
    }
  }

  return (
    <>
      <label htmlFor="username">
        <input type="text" placeholder="enter username" />
      </label>
    </>
  )
}

export default Login

在上面的代码片段中，我们调用setCookie钩子react-cookies并将其设置为默认名称。在我们的例子中，该名称是user。然后，我们
通过调用登录函数来发出登录用户的请求。我们获取该 API 调用的响应，将数据字符串化（cookie 的格式为文本），并将该数据存储在 cookie 中。

我们还向 cookie 传递了一些附加选项，包括path - 确保您的 cookie 在所有路由中均可访问，maxAge（从设置到过期的时间）以及sameSite。Samesite表示此 cookie 只能在其来源的网站上使用 - 将其设置为 true 非常重要，以避免 Firefox 日志中出现错误。

授予您的应用访问 Cookie 的权限

为了确保应用程序中的每个路由都可以访问 cookie，我们需要将 APP 组件包装在 cookie 提供程序中。

在里面_app.js添加以下代码。

// pages/_app.js
import { CookiesProvider } from "react-cookie"

export default function MyApp({ pageProps }) {
  return (
    <CookiesProvider>
      <Component {...pageProps} />
    </CookiesProvider>
  )
}

设置解析cookie的函数

接下来，我们需要设置一个函数来检查服务器上是否存在该 Cookie，解析该 Cookie 并返回它。创建一个名为helpers的新文件夹，并在其中添加一个index.js文件。

在此文件中，添加以下代码。

// helpers/index.js

import cookie from "cookie"

export function parseCookies(req) {
  return cookie.parse(req ? req.headers.cookie || "" : document.cookie)
}

上述函数接受一个请求对象并检查请求标头以查找存储的 cookie。

访问组件内的 cookie

最后，我们将getInitialProps在组件中使用它来检查用户在服务器端是否已拥有有效的 Cookie，然后再渲染请求的路由。此方法的另一种方法是使用getServerSideProps。

import { parseCookies } from "../helpers/"

export default function HomePage({ data }) {
  return (
    <>
      <div>
        <h1>Homepage </h1>
        <p>Data from cookie: {data.user}</p>
      </div>
    </>
  )
}

HomePage.getInitialProps = async ({ req, res }) => {
  const data = parseCookies(req)

if (res) {
    if (Object.keys(data).length === 0 && data.constructor === Object) {
      res.writeHead(301, { Location: "/" })
      res.end()
    }
  }

  return {
    data: data && data,
  }
}

在 中getInitialProps，我们将 NextJS 服务端可用的请求对象 (req) 传递给该parseCookies函数。该函数返回 cookie，然后我们可以将其作为 props 发送回客户端。

我们还会检查服务器端的响应对象是否可用。res对象仅在服务器上可用。如果用户使用next/link或next/router访问HomePage路由，则res对象将不可用。

使用res对象，我们检查是否存在 Cookie 以及它们是否仍然有效。我们使用该res对象进行检查。如果对象为空，则表示 Cookie 无效。如果 Cookie 无效，我们会将用户重定向回主页，而不是在重定向用户之前显示HomePagedata的 flash 。

getInitialProps 请注意，对包含使用 next/link或next/router 的页面的后续请求将从客户端完成。即，对于通过使用 next/link或next/router访问的其他路由，将从客户端而不是服务器端提取 cookie

这样，您现在可以在应用程序中为用户存储 cookie，使这些 cookie 过期，并在很大程度上保护您的应用程序的安全。