Estoy construyendo la parte de autenticación de usuario de una aplicación nextjs. He completado la mayor parte salvo las rutas protegidas. Estoy intentando manejar la parte de autenticación en _app.js. Aquí está el archivo:
import App from 'next/app' import '../styles/globals.css' import { parseCookies } from 'nookies' import { redirectUser } from '../utils/auth' import jwt from 'jsonwebtoken' class MyApp extends App { static async getInitialProps({ Component, ctx }) { const { token } = parseCookies(ctx) let pageProps = {} if (Component.getInitialProps) { pageProps = await Component.getInitialProps(ctx) } if (!token) { const isProtectedRoute = ctx.pathname === '/account' if (isProtectedRoute) { redirectUser(ctx, '/login') } } else { try { const verified = jwt.verify(token, process.env.JWT_SECRET) } catch(err) { console.error(err) redirectUser(ctx, '/login') } } return { pageProps } } render() { const { Component, pageProps } = this.props; return ( <Component {...pageProps} /> ) } } export default MyAppY mi archivo redirectUser:
import cookie from 'js-cookie'; import Router from 'next/router'; export function handleLogin(token) { cookie.set('token', token) Router.push('/account'); } export function redirectUser(ctx, location) { if (ctx.req) { ctx.res.writeHead(302, { Location: location }) ctx.res.end() } else { Router.push(location) } }La parte de autenticación redirige correctamente cuando un usuario no tiene un token, pero si ese token se modifica para que no sea válido, aparece un error de redireccionamiento:
The page isn't redirecting properly Firefox has detected that the server is redirecting the request for this address in a way that will never complete. Confirmé que es la segunda llamada de redirectUser la que está causando este error. Incluso si lo coloco fuera del condicional else en la parte inferior de la función getInitialProps obtengo el mismo resultado.
Obtiene ese error porque termina desencadenando un ciclo de redireccionamiento infinito a la página de inicio de /login .
Al aterrizar en cualquier página con un token no válido, se redirigirá a la página de inicio de /login . Cuando ocurra esta redirección, se activará otra llamada App.getInitialProps que terminará provocando otra redirección a la página de inicio de /login , ya que el token aún no es válido, y así sucesivamente.
Puede evitar este comportamiento agregando controles cuando la página actual es la página de inicio de /login . Esto se puede manejar de varias maneras, pero dejaré un ejemplo aquí.
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') } }