如何在 Next js 中从浏览器获取 cookie（不使用 getServerSide 或 getInitialProps）？答案

【问题标题】：How can I get cookie from browser in Next js (without use getServerSide or getInitialProps)?如何在 Next js 中从浏览器获取 cookie（不使用 getServerSide 或 getInitialProps）？
【发布时间】：2021-01-29 20:12:28
【问题描述】：

我想获取位于 cookies.

但是当我试图得到它时，我得到了 undefined 或类似的东西。我想使用 useContext 并将 _app 放在上下文中（以检查用户是否在子元素中获得授权），但我无法以任何方式获取 cookie。

我可以在位于 adminPanel 元素中的以下代码中获取 cookie，但我不想破坏 DRY 原则。也许您可以向我推荐一些获取身份验证的全局上下文的方法？（没有下一个身份验证或类似的东西

export async function getServerSideProps(ctx) {
if (ctx.req) {
    axios.defaults.headers.get.Cookie = ctx.req.headers.cookie
    return {
        props: {
            cookie: ctx.req.headers.cookie ? ctx.req.headers.cookie : ''
        }
    }
}

我尝试在 _app 中获得至少类似于授权令牌的东西，但没有任何效果（我也尝试了 getServerSideProps）。

export async function getInitialProps(ctx) {
return {
    props:{
        ctx
    }
}

}

在这种情况下，我得到了 ctx: undefined...

也许您可以向我推荐一些获取身份验证的全局上下文的方法？（没有 next-auth 或类似的东西）

【问题讨论】：

标签： javascript authentication cookies next.js

【解决方案1】：

这个问题有很多，如果我不能直接回答，请原谅我，如果您需要进一步阐述，请告诉我。

首先，在 next 中有一个使用 cookie 的帮助包：https://www.npmjs.com/package/next-cookies

其次，如果您想保持getServerSideProps DRY，您可以随时制作可重用函数或 HOC 包装器并将其加载到需要它的任何页面中。

第三，_app.jsx 获取上下文与常规页面略有不同。页面上下文被包装在一个应用上下文中，如下所示：

import App from "next/app";

class MyApp extends App {
   //...
}

MyApp.getInitialProps = async (appCtx) => {
  const appProps = await App.getInitialProps(appCtx);

  const { ctx } = appCtx;

  console.log(ctx);

  // todo: get your data from ctx here
};

但请注意，这会破坏整个网站的静态优化，因此最好将其保留在每个需要它的页面上。

【讨论】：