Reactjs 具有Auth0和Redux的NextJS应用程序在手动刷新时检索Auth会话失败

问题：如果我刷新一个页面，getInitialProps会触发，但它会让我看到页面底部的错误描述，它指出了我在/_app.js上的redux包装器一直存在的问题，我认为这就是问题所在。这种行为只发生在刷新页面上。如果我从一个没有getInitialProps的页面开始，然后在客户端导航到一个有getInitialProps的页面，它就可以正常工作。如果我随后手动刷新页面，则会触发错误

这是我对redux的设置，我用基于类的版本进行了尝试，结果相同，所以这不是问题所在

/_app.js

import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import { initStore } from "../store";

import "./styles.scss";

const MyApp = props => {
  const { Component, pageProps, store } = props;
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
};

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const pageProps = Component.getInitialProps
    ? await Component.getInitialProps(ctx)
    : {};
  return { pageProps };
};

export default withRedux(initStore)(MyApp);

这是带有Auth的内部API设置 /api/applications.js

import auth0 from "../../../../lib/auth/auth0";
// auth0.requireAuthentication ensures that only authenticated users access this internal API path
export default auth0.requireAuthentication(async (req, res) => {
  // get user profile from Auth0 on the server side
  const { user } = await auth0.getSession(req);

process the rest of the stuff...
})

这是Auth0初始化配置背后的代码 …/auth/auth0.js

import { initAuth0 } from "@auth0/nextjs-auth0";
import config from "./config";

export default initAuth0({
  clientId: config.AUTH0_CLIENT_ID,
  clientSecret: config.AUTH0_CLIENT_SECRET,
  scope: config.AUTH0_SCOPE,
  domain: config.AUTH0_DOMAIN,
  redirectUri: config.REDIRECT_URI,
  postLogoutRedirectUri: config.POST_LOGOUT_REDIRECT_URI,
  session: {
    cookieSecret: config.SESSION_COOKIE_SECRET,
    cookieLifetime: config.SESSION_COOKIE_LIFETIME,
    cookieSameSite: "lax",
    storeIdToken: true,
    storeRefreshToken: true,
    storeAccessToken: true
  }
});

这是Chrome开发工具上的应用程序选项卡，它显示a0state和a0session。当我刷新时，状态消失，但cookie保持不变。在一个未受保护的页面上，当我假设调用检查会话是否有效后，它会返回，但在一个受保护的页面上，它会进入上面的错误

如果取消了

requireauthentication

，则出现错误

如果启用了

requireAuthentication

时出错

因此，我怀疑，每当手动页面刷新开始时，auth0就会丢失状态，并且它不会在

req

中将状态传递给API，因此它无法通过auth检查，也无法从用户处获取会话。如果我删除了

auth0.requireAuthentication

，它仍然会失败，因为我依赖于

auth0.getSession（req）中的
user

虽然失败，但仍然会触发错误，因为

用户

出现

未定义

。我认为发生的情况是，由于Redux包装器设置没有传递必要的信息或触发必要的身份验证，因此会话没有正确传递。在这一点上，我有点不知所措，因为所有这些工具对我来说都是新的，我不确定哪里出了问题，在哪里修复它，而且由于3个不同的库相互作用，它变得更加困难。帮助找出这个超级讨厌的错误：）

我到处检查，找不到解决方案或类似的设置来进行比较，并找出我在设置上犯的潜在错误。所有内容都与文档中不同工具的示例非常相似

next wrapper redux

/

nextjs-auth0

/

next

import { initAuth0 } from "@auth0/nextjs-auth0";
import config from "./config";

export default initAuth0({
  clientId: config.AUTH0_CLIENT_ID,
  clientSecret: config.AUTH0_CLIENT_SECRET,
  scope: config.AUTH0_SCOPE,
  domain: config.AUTH0_DOMAIN,
  redirectUri: config.REDIRECT_URI,
  postLogoutRedirectUri: config.POST_LOGOUT_REDIRECT_URI,
  session: {
    cookieSecret: config.SESSION_COOKIE_SECRET,
    cookieLifetime: config.SESSION_COOKIE_LIFETIME,
    cookieSameSite: "lax",
    storeIdToken: true,
    storeRefreshToken: true,
    storeAccessToken: true
  }
});