Question

我遇到了有关从Next.js中的getInitialProps函数获取数据的问题

情况是这样的：当用户第一次访问页面时，我向远程API发出一个http请求，该API向我返回了应用程序所需的数据。我在getInitialProps方法内发出请求，因为我希望在将内容发送给用户时完全呈现内容。

问题是，当我发出此请求时，API向我返回了一个会话cookie，该会话cookie需要存储在浏览器中，而不是呈现内容的服务器中。该cookie必须在将来对API的客户端请求中出现。否则，API会返回403。

我的问题是：如果我正在从服务器执行此请求，并且因此响应也返回到服务器，那么如何设置浏览器的cookie，以便可以发出客户端请求到API？

我尝试操纵Cookie的domain选项，但无法设置其他域。浏览器只会忽略它。

这是我的getInitialProps的样子：

static async getInitialProps(appContext) {
        const { Component, ctx, router } = appContext;
        const { store } = ctx;
        let pageProps = {};

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(appContext);
        }

        const { hotelId, reservationId } = router.query;

        if (!hotelId || !reservationId) return { pageProps };

        // Fetching reservation and deal data
        try {
            const { data, errors, session } = await fetchData(hotelId, reservationId);

            if (data) {
                store.dispatch(storeData(data));
            }

        // This works, but the domain will be the frontend server, not the API that I connecting to the fetch the data
        if (session) {
            ctx.res.setHeader('Set-Cookie', session);
        }

        // This doesn't work
        if (session) {
            const manipulatedCookie = session + '; Domain: http://exampe-api.io'
            ctx.res.setHeader('Set-Cookie', manipulatedCookie);
        }

            if (errors && errors.length) {
                store.dispatch(fetchError(errors));
                return { errors };
            } else {
                store.dispatch(clearErrors());
                return {
                    ...pageProps,
                    ...data
                };
            }
        } catch (err) {
            store.dispatch(fetchError(err));

            return { errors: [err] };
        }

        return { pageProps };
    }

fetchData函数只是向API发送请求的函数。从响应对象中，我提取cookie，然后将其分配给session变量。

Answer 1

getInitialProps在客户端和服务器上执行。因此，当您编写提取功能时，您将有条件地进行提取。因为如果您在服务器端发出请求，则必须输入绝对URL，但是如果您在浏览器中，则使用相对路径。您需要注意的另一件事是，当您发出请求时，必须自动附加cookie。

在您的示例中，您尝试从_app.js发出请求。 Next.js使用App组件初始化页面。因此，如果您想在页面上显示一些秘密数据，请在该页面上执行。 _app.js是所有其他组件的包装，从_app.js的getInitialProps函数返回的任何内容都可用于应用程序中的所有其他组件。但是，如果您想在授权时在组件上显示一些秘密数据，我认为最好让该组件来获取数据。假设用户登录了他的帐户，则仅当用户登录时才需要获取数据，因此其他不需要身份验证的端点将无法访问该秘密数据。

因此，假设某个用户登录并且您要获取其秘密数据。假设您有页面/ secret，那么在该组件内部我可以这样写：

Secret.getInitialProps = async (ctx) => {
  const another = await getSecretData(ctx.req);

  return { superValue: another };
};

getSecretData（）是我们应该获取秘密数据的地方。提取操作通常存储在/actions/index.js目录中。现在我们在这里编写获取函数：

 // Since you did not mention which libraries you used, i use `axios` and `js-cookie`. they both are very popular and have easy api.
    import axios from "axios";
    import Cookies from "js-cookie";


    //this function is usually stored in /helpers/utils.js
    // cookies are attached to req.header.cookie
    // you can console.log(req.header.cookie) to see the cookies
    // cookieKey is a  param, we pass jwt when we execute this function
    const getCookieFromReq = (req, cookieKey) => {
      const cookie = req.headers.cookie
        .split(";")
        .find((c) => c.trim().startsWith(`${cookieKey}=`));

      if (!cookie) return undefined;
      return cookie.split("=")[1];
    };

    //anytime we make request we have to attach our jwt 
    //if we are on the server, that means we get a **req** object and we execute above function.
   // if we do not have req, that means we are on browser, and we retrieve the    cookies from browser by the help of our 'js-cookie' library.
    const setAuthHeader = (req) => {
      const token = req ? getCookieFromReq(req, "jwt") : Cookies.getJSON("jwt");

      if (token) {
        return {
          headers: { authorization: `Bearer ${token}` },
        };
      }
      return undefined;
    };

    //this is where we fetch our data.
    //if we are on server we use absolute path and if not we use relative
    export const getSecretData = async (req) => {
      const url = req ? "http://localhost:3000/api/v1/secret" : "/api/v1/secret";
      return await axios.get(url, setAuthHeader(req)).then((res) => res.data);
    };

这是您应该在next.js中实现获取数据的方式

Next.js getInitialProps cookie

1 个答案: