Javascript 如何使用next.js获取客户端cookie？

我无法通过next.js在服务器端和客户端找到isAuthenticated变量的常量值

我正在使用自定义app.js在Apollo Provider中包装应用程序。我使用布局来显示用户是否经过身份验证。defaultPage是一个临时组件

当页面位于服务器端时，isAuthenticated设置为true。但是，只要我更改页面（客户端呈现（无重新加载）），经过身份验证的页面就会一直保持未定义状态，直到我重新加载页面为止

_app.js

从“下一个/App”导入应用程序；
从“React”导入React；
从“../lib/apollo”导入数据；
从“../components/Layout”导入布局；
类MyApp扩展了应用程序{
//静态异步getInitialProps（{Component，router，ctx}）{
//让pageProps={}；
//if（Component.getInitialProps）{
//pageProps=等待组件.getInitialProps（ctx）；
//     }
//返回{pageProps}；
//   }
render（）{
const{Component，pageProps，isAuthenticated}=this.props；
返回(
);
}
}
使用数据导出默认值（MyApp）；

layout.js

从“React”导入React；
从“./hoc/defaultPage”导入默认页面；
类布局扩展了React.Component{
建造师（道具）{
超级（道具）；
}
静态异步getInitialProps（ctx）{
让pageProps={}；
if（Component.getInitialProps）{
pageProps=等待组件.getInitialProps（ctx）；
}
返回{pageProps，isAuthenticated}；
}
render（）{
const{isAuthenticated，children}=this.props；
返回(
{是否已验证(
我被记录了
) : (
我没有登录
)}
{儿童}
)
}
}
导出默认页面（布局）；

defaultPage.js

/*hocs/defaultPage.js*/
从“React”导入React；
从“下一个/路由器”导入路由器；
从“./components/Auth”导入验证；
const auth=new auth（）；
导出默认页面=>
类DefaultPage扩展了React.Component{
静态异步getInitialProps（ctx）{
const loggedUser=process.browser
？auth.getUserFromLocalCookie（）
：auth.getUserFromServerCookie（ctx）；
const pageProps=Page.getInitialProps&&Page.getInitialProps（ctx）；
let path=“”
返回{
…页面道具，
罗格杜塞，
currentUrl:path，
已验证：！！loggedUser
};
}
render（）{
返回；
}
};

---

我在这里遗漏了什么？

我认为客户端和服务器端使用的不是同一个cookie。下面是如何获取客户端cookie的，并且必须将此cookie附加到服务器端请求中

static async getInitialProps(ctx) {
    // this is client side cookie that you want
    const cookie = ctx.req ? ctx.req.headers.cookie : null

    // and if you use fetch, you can manually attach cookie like this
    fetch('is-authenticated', {
        headers: {
            cookie
        }
    }
}

---

使用NextJs，您可以获得客户端助手cookie，而无需任何额外的库，但我鼓励您做的是安装

---

很长时间以来，我一直使用类组件，但您得到了这个概念，以防需要类组件

请确保在Apollo中将fetch策略更改为仅网络。也许它正试图从缓存中读取。不久前我也有同样的问题。此外，在登录后，您可能必须手动写入缓存。

import cookie from "js-cookie"

 export default () => {
   //to get a particular cookie
    const authCookie = cookies.get("cookieName")

    return "hey"
}

export const getServerSideProps = async ({req: {headers: {cookie}} => {
    console.log(cookie)

       return {
        props: {key: "whatever you want to return"
    }
}