인증되지 않은 사용자 리디렉션, AWS Amplify

Question

AWS Amplify를 사용하여 웹 애플리케이션을 구축하려고 합니다. 인증을 구성했지만 특정 페이지를 인증된 사용자만 사용할 수 있도록 하고 싶습니다. 예를 들어 홈 페이지는 누구나 볼 수 있지만 "/대시보드"는 로그인한 사용자만 볼 수 있습니다. 저는 현재 백엔드와 React 프런트엔드에 AWS Amplify를 사용하고 있으며, 페이지 간 라우팅에는 반응 라우터 v6을 사용하고 있습니다.

현재 내 라우팅 코드는 매우 간단하며(React를 처음 사용함) App.js에 있습니다.

으아악

먼저 withAuthenticator를 사용하여 인증하려는 페이지를 래핑하려고 시도했지만 이로 인해 로그인 상자가 표시되는 루프가 발생했습니다.

으아악

사용자가 인증되었는지 확인하고 다른 것을 반환하는 기능도 추가해 보았지만 인증된 사용자와 인증되지 않은 사용자에게만 빈 화면이 표시됩니다. async 때문인 것 같은데, React에 익숙하지 않아서 그 이유와 해결 방법을 이해할 수 없습니다.

으아악

저도 비동기적으로 라우팅할 수 있는 방법이 있는지 알아보려고 했지만 어떻게 구현해야 할지 잘 모르겠습니다.

편집자:

@Jlove의 솔루션은 이미 예상대로 작동합니다. 업데이트된 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 (
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Answer 1

각 경로가 렌더링하는 것과 경로를 보호하는 논리를 분리하고 싶을 것입니다. 경로에서 렌더링하려는 UI/콘텐츠 구성 요소와 인증을 혼합하지 마세요.

일반적인 보호 패턴은 레이아웃 라우팅을 사용하여 액세스를 보호하려는 전체 경로 그룹을 래핑하는 것입니다. 현재 사용자의 인증 상태를 확인하고 조건부로 반환하는 효과를 트리거하는 레이아웃 경로 구성 요소를 생성합니다.

• 없음/로드 중(상태를 아직 알 수 없는 경우)
• 보호된 콘텐츠의 경우Outlet (사용자가 인증된 경우)
• 비보호 경로로 리디렉션(사용자가 인증되지 않은 경우)

이렇게 하면 (a) 사용자가 인증되지 않았다는 사실이 알려지기 전에 실수로 보호된 페이지에 액세스하는 것과 (b) 사용자가 인증되었다는 사실이 알려지기 전에 실수로 로그인 페이지로 리디렉션되는 것을 방지할 수 있습니다.

예:

으아악 으아악

포장에는 보호된 라우팅이 필요합니다.

으아악

Answer 2

인증 구성 요소에 구성 요소 라우팅을 래핑하여 이를 수행하는 한 가지 방법은 다음과 같습니다.

으아악

여기서 목표는 라우터를 사용하여 Auth返回的结果来保护您的路由。如果Auth캐치 경로 선택에 따라 사용자를 승인되지 않은 페이지로 이동시키는 것입니다.