Ich versuche, eine Webanwendung mit AWS Amplify zu erstellen. Ich habe die Authentifizierung konfiguriert, möchte aber, dass bestimmte Seiten nur für authentifizierte Benutzer verfügbar sind. Beispielsweise kann die Startseite von jedem gesehen werden, „/dashboard“ jedoch nur von angemeldeten Benutzern. Ich verwende derzeit AWS Amplify für mein Backend und ein React-Frontend und verwende React-Router v6 für die Weiterleitung zwischen Seiten.

Derzeit ist mein Routing-Code sehr einfach (ich verwende React zum ersten Mal) und befindet sich in App.js:

import React from 'react'; import { BrowserRouter, Route, Routes, } from 'react-router-dom'; import Login from './pages/Login'; import Home from './pages/Home'; import Dashboard from './pages/Dashboard'; import ErrorPage from './pages/ErrorPage'; const App = () => { return (   } /> } /> } /> } />   ); } export default App;

Ich habe zuerst versucht, die Seite, die ich authentifizieren wollte, mitwithAuthenticatorzu umbrechen, aber das führte nur zu einer Schleife, die das Anmeldefeld anzeigte.

function Dashboard({ signOut, user }) { return ( <> 
Hello {user.username}, this is still in development.
  Sign out  ); } export default withAuthenticator(Dashboard);

Ich habe auch versucht, eine Funktion hinzuzufügen, um zu prüfen, ob der Benutzer authentifiziert ist, und etwas anderes zurückzugeben, aber diese zeigt nur einen leeren Bildschirm für authentifizierte und nicht authentifizierte Benutzer. Ich denke, das liegt daran, dass esasyncist, aber ich kenne mich mit React nicht gut genug aus, um zu verstehen, warum und wie man das Problem beheben kann.

async function isAuthed() { try { await Auth.currentAuthenticatedUser(); return true; } catch(e) { return false; } } async function Dashboard() { if (await isAuthed()) { return ( <> 
Hello, this is still in development.
  ); } else { return ( <> 
Please login to view this page.
  ) } }

Ich habe auch versucht herauszufinden, ob es eine Möglichkeit gibt, asynchron weiterzuleiten, bin mir aber nicht sicher, wie ich das implementieren soll.

Herausgeber:

@Jlove funktioniert bereits wie erwartet, mein aktualisierterApp.jsRouting-Code lautet wie folgt:

import React, { useState, useEffect } from 'react'; import { BrowserRouter, Route, Routes, useNavigate, } from 'react-router-dom'; import { Amplify, Auth } from 'aws-amplify' import Login from './pages/Login'; import Home from './pages/Home'; import Dashboard from './pages/Dashboard'; import ErrorPage from './pages/ErrorPage'; import Unauthenticated from './pages/Unauthenticated'; function RequireAuth({ children }) { const navigate = useNavigate(); const [isAuth, setIsAuth] = useState(null); useEffect(() => { Auth.currentAuthenticatedUser() .then(() => setIsAuth(true)) .catch(() => { navigate("/unauthenticated") }) }, []) return isAuth && children; } const App = () => { return (   } /> } />    } /> } /> } />   ); } export default App;