Estoy aprendiendo Auth0 + reaccionar y estoy mirando específicamente el ejemplo aquí: https://github.com/auth0-blog/auth0-react-sample
En la página home.js hay un bloque de código:
import React, { Fragment } from "react"; import { Hero, HomeContent } from "../components"; const Home = () => ( <Fragment> <Hero /> <hr /> <HomeContent /> </Fragment> ); export default Home; Lo que quiero hacer es representar el JSX (? Creo que ese es el término) <Hero /> si el usuario está autenticado y presentar algo que diga "Usuario no autenticado para esto" si el usuario no ha iniciado sesión.
Pude hacer funcionar la primera parte cambiando el archivo a:
import React, { Fragment } from "react"; import { Hero, HomeContent } from "../components"; import ProtectedRoute from "../auth/protected-route"; const Home = () => ( <Fragment> <ProtectedRoute path="/Hero" component={Hero} /> {/*<Hero />*/} <hr /> <HomeContent /> </Fragment> ); export default Home;Sin embargo, no sé cómo representar un div "No iniciado sesión". Puedo hacer una vista separada con bastante facilidad y convertirla en una ruta, pero no sé cómo hacer el bloque if/else.
Disculpas si la pregunta es tonta, viniendo del mundo de python.
¡Gracias!
#Editar 1: El componente de la ruta protegida se encuentra a continuación:
// src/auth/protected-route.js import React from "react"; import { Route } from "react-router-dom"; import { withAuthenticationRequired } from "@auth0/auth0-react"; import { Loading } from "../components/index"; const ProtectedRoute = ({ component, ...args }) => ( <Route component={withAuthenticationRequired(component, { onRedirecting: () => <Loading />, })} {...args} /> ); export default ProtectedRoute;Según lo que necesite, podemos volver a llamar al useAuth0 en el componente Inicio para obtener el estado de autenticación. Prueba lo siguiente:
const Home = () => { const { isAuthenticated } = useAuth0() return ( <Fragment> {isAuthenticated ? <Hero /> : "User not authenticated for this"} <hr /> <HomeContent /> </Fragment> ) } El useAuth0 es en realidad solo un consumidor de API de contexto: https://github.com/auth0/auth0-react/blob/master/src/use-auth0.tsx
El proveedor de contexto Auth0ProviderWithHistory se representa en index.js y envuelve nuestro componente de la App , por lo que podemos llamar al gancho useAuth0 en cualquier lugar de nuestra App para obtener cualquiera de las funciones auxiliares o de estado de Auth0.
Si no conoce la API de React Context, aquí están los documentos: https://reactjs.org/docs/context.html