Nextjs 在 _app.js 中重定向“页面未正确重定向”

Question

我正在构建 nextjs 应用程序的用户身份验证部分。除了受保护的路线外，我已经完成了大部分工作。我正在尝试处理 _app.js 中的 auth 部分。这是文件：

\n

import App from 'next/app'\nimport '../styles/globals.css'\nimport { parseCookies } from 'nookies'\nimport { redirectUser } from '../utils/auth'\nimport jwt from 'jsonwebtoken'\n\nclass MyApp extends App {\n  static async getInitialProps({ Component, ctx }) {\n    const { token } = parseCookies(ctx)\n    \n    let pageProps = {}\n\n    if (Component.getInitialProps) {\n      pageProps = await Component.getInitialProps(ctx)\n    }\n\n    if (!token) {\n      const isProtectedRoute = ctx.pathname === '/account'\n      if (isProtectedRoute) {\n        redirectUser(ctx, '/login')\n      }\n    } else {\n      try {\n        const verified = jwt.verify(token, process.env.JWT_SECRET)\n      } catch(err) {\n        console.error(err)\n        redirectUser(ctx, '/login')\n      }\n    }\n    \n    return { pageProps }\n  }\n\n  render() {\n    const { Component, pageProps } = this.props;\n    return (\n      <Component {...pageProps} />\n    )\n  }\n}\n\nexport default MyApp\n

\n

还有我的重定向用户文件：

\n

import cookie from 'js-cookie';\nimport Router from 'next/router';\n\nexport function handleLogin(token) {\n    cookie.set('token', token)\n    Router.push('/account');\n}\n\nexport function redirectUser(ctx, location) {\n    if (ctx.req) {\n        ctx.res.writeHead(302, { Location: location })\n        ctx.res.end()\n    } else {\n        Router.push(location)\n    }\n}\n

\n

当用户没有令牌时，身份验证部分会正确重定向，但如果该令牌被更改为无效，我会收到重定向错误：

\n

The page isn\xe2\x80\x99t redirecting properly\n\nFirefox has detected that the server is redirecting the request for this address in a way that will never complete.\n

\n

我已确认是第二个redirectUser调用导致了此错误。即使我将它放在 getInitialProps 函数底部的 else 条件之外，我也会得到相同的结果。

\n

Answer 1

您收到该错误是因为您最终触发了页面的无限重定向循环/login。

登陆任何带有无效令牌的页面都会重定向到该/login页面。当此重定向发生时，它将触发另一个App.getInitialProps调用，最终导致另一个重定向到该/login页面，因为令牌仍然无效，等等。

您可以通过在当前页面是该页面时添加检查来防止此行为/login。这可以通过多种方式处理，但我将在这里留下一个例子。

if (!token) {
    const isProtectedRoute = ctx.pathname === '/account'
    if (isProtectedRoute) {
        redirectUser(ctx, '/login')
    }
} else if (ctx.pathname !== "/login") { // To avoid redirect loop
    try {
        const verified = jwt.verify(token, process.env.JWT_SECRET)
    } catch(err) {
        console.error(err)
        redirectUser(ctx, '/login')
    }
}