时间戳

首页 > 解决方案 > 使用 Typescript 使用 getInitialProps 将 prop 传递到 Next.js 中的每个页面

javascript - 使用 Typescript 使用 getInitialProps 将 prop 传递到 Next.js 中的每个页面

问题描述

我有一个案例，当我需要在页面被呈现到服务器端并使用 Next.js 发送回我以避免在 UI 中发生闪烁更改之前，我需要知道用户是否已登录。

如果用户已经使用此 HOC 组件登录，我能够弄清楚如何防止用户访问某些页面......

export const noAuthenticatedAllowed = (WrappedComponent: NextPage) => {
    const Wrapper = (props: any) => {
        return <WrappedComponent {...props} />;
    };

    Wrapper.getInitialProps = async (ctx: NextPageContext) => {
        let context = {};
        const { AppToken } = nextCookie(ctx);
        if (AppToken) {
            const decodedToken: MetadataObj = jwt_decode(AppToken);
            const isExpired = () => {
                if (decodedToken.exp < Date.now() / 1000) {
                    return true;
                } else {
                    return false;
                }
            };

            if (ctx.req) {
                if (!isExpired()) {
                    ctx.res && ctx.res.writeHead(302, { Location: "/" });
                    ctx.res && ctx.res.end();
                }
            }

            if (!isExpired()) {
                context = { ...ctx };
                Router.push("/");
            }
        }

        const componentProps =
            WrappedComponent.getInitialProps &&
            (await WrappedComponent.getInitialProps(ctx));

        return { ...componentProps, context };
    };

    return Wrapper;
};

这很好用。

现在，我如何构建一个类似的 HOC 组件来包装它让我们说“_app.tsx”，这样我就可以通过获取令牌将“userAuthenticated”道具传递给每个页面，并确定它是否过期并基于那个道具我可以向用户展示正确的用户界面，而不会出现那种烦人的闪烁效果？

我希望你能帮我解决这个问题，我尝试用与构建上述 HOC 相同的方式来做，但我做不到，尤其是 Typescript 的奇怪错误并没有让这变得更容易:(


编辑 == ===========================================

我能够创建这样的 HOC 组件并将 pro 传递userAuthenticated给每个页面，就像这样......

export const isAuthenticated = (WrappedComponent: NextPage) => {
    const Wrapper = (props: any) => {
        return <WrappedComponent {...props} />;
    };

    Wrapper.getInitialProps = async (ctx: NextPageContext) => {
        let userAuthenticated = false;

        const { AppToken} = nextCookie(ctx);
        if (AppToken) {
            const decodedToken: MetadataObj = jwt_decode(AppToken);
            const isExpired = () => {
                if (decodedToken.exp < Date.now() / 1000) {
                    return true;
                } else {
                    return false;
                }
            };

            if (ctx.req) {
                if (!isExpired()) {
                    // ctx.res && ctx.res.writeHead(302, { Location: "/" });
                    // ctx.res && ctx.res.end();
                    userAuthenticated = true;
                }
            }

            if (!isExpired()) {
                userAuthenticated = true;
            }
        }

        const componentProps =
            WrappedComponent.getInitialProps &&
            (await WrappedComponent.getInitialProps(ctx));

        return { ...componentProps, userAuthenticated };
    };

    return Wrapper;
};

但是，我必须用这个 HOC 包装每一页，以便将道具传递userAuthenticated给我拥有的全局布局，因为我无法用它包装 "_app.tsx" 类组件，它总是给我一个 Error 。 ..

这有效...

export default isAuthenticated(Home);
export default isAuthenticated(about);

但这并不...

export default withRedux(configureStore)(isAuthenticated(MyApp));

因此，必须对每个页面都执行此操作，然后将 prop 传递给每个页面中的全局布局，而不是只在“_app.tsx”中执行一次，这有点烦人。

我猜原因可能是因为“_app.tsx”是一个类组件，而不是像其他页面那样的函数组件？我不知道，我只是猜测。

有什么帮助吗？

标签： javascriptreactjstypescriptnext.js

解决方案

对于那些可能遇到同样问题的人，我能够通过以下方式解决这个问题......

import React from "react";
import App from "next/app";
import { Store } from "redux";
import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import { ThemeProvider } from "styled-components";
import GlobalLayout from "../components/layout/GlobalLayout";
import { configureStore } from "../store/configureStore";
import { GlobalStyle } from "../styles/global";
import { ToastifyStyle } from "../styles/toastify";
import nextCookie from "next-cookies";
import jwt_decode from "jwt-decode";

 export interface MetadataObj {
   [key: string]: any;
 }

const theme = {
    color1: "#00CC99",
    color2: "#CC0000"
};

export type ThemeType = typeof theme;

interface Iprops {
    store: Store;
    userAuthenticated: boolean;
}

class MyApp extends App<Iprops> {
    // Only uncomment this method if you have blocking data requirements for
    // every single page in your application. This disables the ability to
    // perform automatic static optimization, causing every page in your app to
    // be server-side rendered.

    static async getInitialProps({ Component, ctx }: any) {
        let userAuthenticated = false;

        const { AppToken } = nextCookie(ctx);
        if (AppToken) {
            const decodedToken: MetadataObj = jwt_decode(AppToken);
            const isExpired = () => {
                if (decodedToken.exp < Date.now() / 1000) {
                    return true;
                } else {
                    return false;
                }
            };

            if (ctx.isServer) {
                if (!isExpired()) {
                    userAuthenticated = true;
                }
            }

            if (!isExpired()) {
                userAuthenticated = true;
            }
        }

        return {
            pageProps: Component.getInitialProps
                ? await Component.getInitialProps(ctx)
                : {},
            userAuthenticated: userAuthenticated
        };
    }

    render() {
        const { Component, pageProps, store, userAuthenticated } = this.props;
        return (
            <Provider store={store}>
                <ThemeProvider theme={theme}>
                    <>
                        <GlobalStyle />
                        <ToastifyStyle />
                        <GlobalLayout userAuthenticated={userAuthenticated}>
                            <Component {...pageProps} />
                        </GlobalLayout>
                    </>
                </ThemeProvider>
            </Provider>
        );
    }
}

export default withRedux(configureStore)(MyApp);

如您所见，我发布了整个 _app.tsx 组件，以便您可以看到我正在使用的包。

我正在使用next-redux-wrapperTypescript styled-components。

我必须将appContextingitInitialProps设置为 type any，否则它将无法正常工作。所以如果你有更好的type建议，请告诉我。我尝试使用 type NextPageContext，但由于某种原因在这种情况下不起作用。

使用该解决方案，我能够了解用户是否经过身份验证，并将道具传递给全局布局，以便我可以在每个页面中使用它，而不必逐页进行，这也有利于以防万一如果页眉和页脚必须依赖于道具，您不希望每次都渲染页眉和页脚userAuthenticated，因为现在您只需将页眉和页脚放在GlobalLayout组件中，仍然可以使用userAuthenticated道具：D

推荐阅读