NextJS 在 React 组件中访问 cookie 响应答案

【问题标题】：NextJS access cookie response in React componentsNextJS 在 React 组件中访问 cookie 响应
【发布时间】：2022-08-20 22:28:03
【问题描述】：

我正在使用 Next js 和 Express 后端，我使用 Cookie 进行身份验证，对于受保护的路由，我使用了 Next js 中间件，这很好，但现在我想访问 React 组件中的 cookie 响应以检查是否我们有一个 cookie，然后我想从导航栏中隐藏注册和登录链接，请有人可以帮助我吗？

标签： javascript reactjs cookies next.js

【解决方案1】：

您可以使用 js-cookie 包访问前端的 cookie。

首先在 react 组件中导入：

import Cookies from 'js-cookie'

然后访问 cookie，也许在 useEffect 中这样做以避免任何问题：

useEffect(()=>{
  const allCookies = Cookies.get();
  console.log(allCookies);
}, []);

【讨论】：

好的，让我试试 js-cookie
当我执行const cookies = Cookie.get() 时，它给了我一个空对象
@shakilkhan 你确定你的浏览器有cookie吗？签入开发人员工具。
是的，我已经检查过浏览器有一个带有令牌名称的 cookie
通过js-cookie我们可以读取httpOnly cookies？

【解决方案2】：

对于客户端检查，您可以使用cookieCutter

import cookieCutter from 'cookie-cutter'
cookieCutter.get('myCookieName')

【讨论】：