我找不到一种方法来使用next.js在服务器端和客户端获取恒定值的isAuthenticated变量
我正在使用自定义app.js将应用程序包装在Apollo Provider中。我正在使用布局来显示用户是否已通过身份验证。 defaultPage是一个HOC组件。
当页面在服务器端时,将isAuthenticated设置为true。但是,一旦我更改了页面(客户端渲染(不重新加载)),则isAuthenticated一直处于未定义状态,直到重新加载页面为止。
_app.js
import App from 'next/app';
import React from 'react';
import withData from '../lib/apollo';
import Layout from '../components/layout';
class MyApp extends App {
// static async getInitialProps({ Component,router,ctx }) {
// let pageProps = {};
// if (Component.getInitialProps) {
// pageProps = await Component.getInitialProps(ctx);
// }
// return { pageProps };
// }
render() {
const { Component,pageProps,isAuthenticated } = this.props;
return (
<div>
<Layout isAuthenticated={isAuthenticated} {...pageProps}>
<Component {...pageProps} />
</Layout>
</div>
);
}
}
export default withData(MyApp);
layout.js
import React from "react";
import defaultPage from "../hoc/defaultPage";
class Layout extends React.Component {
constructor(props) {
super(props);
}
static async getInitialProps(ctx) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps,isAuthenticated };
}
render() {
const { isAuthenticated,children } = this.props;
return (
<div>
{isAuthenticated ? (
<h2>I am logged</h2>
) : (
<h2>I am not logged</h2>
)}
{children}
</div>
)
}
}
export default defaultPage(Layout);
defaultPage.js
/* hocs/defaultPage.js */
import React from "react";
import Router from "next/router";
import Auth from "../components/auth";
const auth = new Auth();
export default Page =>
class DefaultPage extends React.Component {
static async getInitialProps(ctx) {
const loggedUser = process.browser
? auth.getUserFromLocalCookie()
: auth.getUserFromServerCookie(ctx);
const pageProps = Page.getInitialProps && Page.getInitialProps(ctx);
let path = ""
return {
...pageProps,loggedUser,currentUrl: path,isAuthenticated: !!loggedUser
};
}
render() {
return <Page {...this.props} />;
}
};
我在这里想念什么?