Rediriger les utilisateurs non authentifiés, AWS Amplify-Questions et réponses sur le réseau chinois PHP

J'essaie de créer une application Web à l'aide d'AWS Amplify. J'ai configuré l'authentification mais je souhaite que certaines pages ne soient disponibles que pour les utilisateurs authentifiés, par exemple la page d'accueil peut être vue par n'importe qui mais "/dashboard" ne peut être vu que par les utilisateurs connectés. J'utilise actuellement AWS Amplify pour mon backend et un frontend React, en utilisant React-Router v6 pour acheminer entre les pages.

Actuellement, mon code de routage est très simple (c'est la première fois que j'utilise React) et se trouve dans 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;

J'ai d'abord essayé d'utiliserwithAuthenticatorpour envelopper la page que je voulais authentifier, mais cela a simplement abouti à une boucle affichant la boîte de connexion.

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

J'ai également essayé d'ajouter une fonction pour vérifier si l'utilisateur est authentifié et renvoyer quelque chose de différent, mais cela n'affiche qu'un écran vide pour les utilisateurs authentifiés et non authentifiés. Je pense que c'est parce que c'est le casasync, mais je ne connais pas suffisamment React pour comprendre pourquoi et comment y remédier.

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.
  ) } }

J'ai également essayé de voir s'il existait un moyen d'acheminer de manière asynchrone, mais je ne sais pas comment l'implémenter.

Éditeur :

La solution de

@Jlove fonctionne déjà comme prévu, monApp.jscode de routage mis à jour est le suivant :

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;

import { Outlet, Navigate } from 'react-router-dom'; const ProtectedRoute = () => { const [isAuth, setIsAuth] = useState(undefined); useEffect(() => { checkAuthentication() .then(() => setIsAuth(true)) .catch(() => setIsAuth(false)); }, []); if (isAuth === undefined) { return null; // 或加载中的旋转器/指示器等 } return isAuth ? : ; }

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'; import ProtectedRoute from './components/ProtectedRoute'; const App = () => { return ( } /> } /> }> } /> {/* ... 其他受保护的路由 ... */} } /> ); } export default App;

} /> export function RequireAuth({children}) { const navigate = useNavigate(); const [isAuth, setIsAuth] = useState(null); useEffect(() => { Auth.currentAuthenticatedUser() .then( () => setIsAuth(true) ) .catch(() => { navigate('/routeToCatchNonAuth') }) }, []) return isAuth && children; }

répondre à tous (2)

P粉7258276862023-09-10 10:13:10 2 plancher

Vous souhaiterez séparer la logique qui protège vos itinéraires de ce que chaque itinéraire restitue. Ne mélangez pas l'authentification avec les composants d'interface utilisateur/de contenu que vous souhaitez afficher sur l'itinéraire.

Un modèle de protection courant consiste à utiliserroutage de mise en pagepour envelopper l'ensemble du groupe de routes dont vous souhaitez protéger l'accès. Vous allez créer un composant d'itinéraire de mise en page qui déclenche un effet pour vérifier le statut d'authentification de l'utilisateur actuel et renvoyer conditionnellement :

Aucun/Chargement (Si le statut n'est pas encore connu)
pour les contenus protégésOutlet(si l'utilisateur a été authentifié)
Redirection vers un itinéraire non protégé (si l'utilisateur n'est pas authentifié)

Cela empêche (a) l'accès accidentel à une page protégée avant de savoir que l'utilisateur n'est pas authentifié, et (b) la redirection accidentelle vers la page de connexion avant de savoir que l'utilisateur a été authentifié.

Exemple :

const checkAuthentication = async () => { try { await Auth.currentAuthenticatedUser(); return true; } catch { return false; } };

L’emballage nécessite un routage protégé.

Comme+0

Ajouter une réponse

P粉9785510812023-09-10 09:28:28 1 plancher

Voici une façon de procéder en encapsulant le routage des composants dans un composant d'autorisation :

L'objectif ici est d'utiliser le routeur pour diriger les utilisateurs vers des pages non autorisées en fonction de laAuth返回的结果来保护您的路由。如果Authsélection de l'itinéraire de capture.