앵귤러 베이직스

앵귤러 베이직스

반응형

Angular Basics 시리즈 7부에 오신 것을 환영합니다. 이 부분에서도 라우팅 작업을 계속하겠습니다. 시작점은 이전 부분의 코드입니다. 여기서 코드를 얻을 수 있습니다.

먼저 와일드카드 경로로 오류를 처리하는 방법을 배우겠습니다. 먼저 명령을 사용하여 새 구성 요소를 생성합니다.

ng g c page-not-found

page-not-found.component.html를 적절한 텍스트로 업데이트하겠습니다.

다음으로 app.module.ts 파일에서 찾을 수 없는 경로와 찾을 수 없는 경로로 리디렉션되는 경로를 추가합니다.

이제 어떤 경로로 이동하면 /찾을 수 없는 페이지로 리디렉션됩니다.

이제 매번 무언가를 사용할 수는 없으며 Angular는 경로를 지정하기 위해 더블 스타의 특수 와일드카드를 제공합니다. app.module.ts 파일에 같은 내용을 추가하겠습니다.

이제 http://localhost:4200/kkk와 같은 존재하지 않는 경로로 이동할 때 페이지를 찾을 수 없는 텍스트가 표시됩니다.

앱 모듈에는 많은 경로가 있으며, 일반적으로 앱 라우팅.module.ts라는 새 파일을 추가합니다. app.module.ts 파일에서 모든 경로를 제거하고 RouterModule의 줄도 제거합니다.

이제 app-routing.module.ts 파일에는 모든 경로와 필요한 가져오기 항목이 포함됩니다.

이제 app.module.ts 파일로 돌아가 AppRoutingModule을 추가하겠습니다.

현재, 우리의 앱은 라우팅이 분리된 localhost에서 더 일찍 작동합니다.

이제 canActivateChild를 사용하여 경로를 보호하는 방법을 배우겠습니다. 그러나 이를 위해 먼저 앱 폴더에 auth.service.ts라는 가짜 인증 서비스를 만들 것입니다.

여기에는 로그인 및 로그아웃 기능이 있으며 800ms 후에 약속을 반환하는 isAuthenticated 기능도 있습니다.

이제 auth-guard.service.ts 파일을 만듭니다. 구성 요소는 canAuthenticate를 사용하여 authService에서 isAuthenticated를 호출하고 결과에 따라 true로 돌아가거나 사용자를 홈으로 탐색합니다.

이제 app-routing.module.ts 파일로 이동하여 서버 경로를 보호합니다.

또한 app.module.ts 파일에 새로운 서비스를 추가해야 합니다.

현재 서버 경로에 액세스할 수 없으며, 서버 경로를 클릭하면 800ms 후에 홈 경로로 이동됩니다.

이제 home.component.html 파일로 이동하여 각각 onLogin과 onLogout 방법을 호출하는 두 개의 버튼을 생성함으로써 canActivate 동작을 완료하겠습니다.

이제 home.component.ts 파일에서 onLogin 및 onLogout 메서드를 추가하여 authService를 호출하여 로그인을 참 또는 거짓으로 만듭니다.

이제 인증이 완료되었으며 로그인 버튼을 클릭하면 800ms 후에 서버에 액세스할 수 있으며 로그아웃을 클릭하면 서버가 비활성화됩니다.

같은 내용의 코드는 이 Github repo에서 찾을 수 있습니다.

from http://it-ground.tistory.com/227 by ccl(A) rewrite - 2021-09-24 03:26:58