es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Next.js: ¿Cómo prevenir el destello de la ruta/página no autorizada antes de redirigir al implementar una ruta privada?

Next.js: ¿Cómo prevenir el destello de la ruta/página no autorizada antes de redirigir al implementar una ruta privada?

16 Jul, 2023 Programación

Básicamente, he creado un HOC para dos páginas en mi aplicación Next.js (es decir, “perfil” y “dashboard”) para evitar que los usuarios accedan a ellas si no están autorizados.

Ejemplo: “pages/profile.js”

import withAuth from “../components/AuthCheck/index”;

function Profile() {
return (
<>

Profile

)
}

export default withAuth(Profile);

Mi componente/HOC de autenticación:

import { useRouter } from ‘next/router’
import { useUser } from ‘../../lib/hooks’
import { PageLoader } from ‘../Loader/index’

const withAuth = Component => {
const Auth = (props) => {
const { isError } = useUser(); //Mi hook que llama a /api/user para verificar si hay un usuario
const router = useRouter()

if (isError === 'Unauthorized') {
  if (typeof window !== 'undefined' && router.pathname === '/profile' || router.pathname === 'dashboard') router.push('/login')

  return <pageloader></pageloader>
}
return (
  <component {...props}=""></component>
);

};

if (Component.getInitialProps) {
Auth.getInitialProps = Component.getInitialProps;
}

return Auth;
};

export default withAuth;

Ahora lo que sucede es que si ingresas “/profile” o “/dashboard” en la barra de URL del navegador, antes de la redirección verás la página durante un segundo, es decir, un destello.

¿Alguna idea de por qué sucede esto?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    La razón por la cual la página parpadea antes de que ocurra la redirección es porque el HOC withAuth se ejecuta en el lado del servidor antes de que ocurra la redirección. Esto significa que la página se está renderizando antes de que el HOC entre en acción y redirija al usuario a la página de inicio de sesión.

    Para solucionar este problema, puedes utilizar el hook useEffect en el componente Auth para esperar hasta que el hook isError devuelva un valor antes de renderizar la página. De esta manera, la redirección ocurrirá antes de que la página se muestre, evitando el parpadeo.

    Aquí tienes una versión actualizada del componente Auth:

    import { useRouter } from 'next/router'
import { useUser } from '../../lib/hooks'
import { PageLoader } from '../Loader/index'

const withAuth = Component => {
  const Auth = props => {
    const { isError } = useUser()
    const router = useRouter()

    React.useEffect(() => {
      if (isError === 'Unauthorized') {
        if (typeof window !== 'undefined' && (router.pathname === '/profile' || router.pathname === 'dashboard')) {
          router.push('/login')
        }
      }
    }, [isError])

    if (isError === 'Unauthorized') {
      return <pageloader></pageloader>
    }

    return <component {...props}=""></component>
  }

  if (Component.getInitialProps) {
    Auth.getInitialProps = Component.getInitialProps
  }

  return Auth
}

export default withAuth

    Al utilizar useEffect, puedes retrasar la renderización del componente hasta que el hook isError devuelva un valor. Esto debería evitar que la página parpadee antes de la redirección.

Comments are closed.