Angular 11 및 가 포함된 온라인 상점을 개발합니다.넷 코어 5

반응형

이 기사에서는 프로젝트에 권한을 부여합니다. 이는 이전 기사에서 살펴본 인증 기능을 보완한 것입니다. 이 시리즈의 첫 번째 게시물(이전 게시물에 대한 링크)을 여기에서 찾을 수 있습니다.

프런트엔드

먼저 권한 부여 등을 위한 도우미 클래스가 포함된 폴더(헬퍼)를 새로 추가합니다.

helpers 폴더에 인터셉터 클래스를 만듭니다.

 

이 클래스는 모든 나가는 http 요청을 호출하는 단일 함수를 포함합니다(API에만 해당). 사용자가 로그인한 경우 이 함수는 요청 헤더에 JSON 웹 토큰을 추가합니다. 이 토큰은 인증 단계에서 백엔드에서 전송되었으며 이전 문서의 세션 저장소에 저장되었습니다.

토큰은 백엔드 API 미들웨어에 의해 검사되어 데이터 요청이 승인되었는지 여부를 결정합니다.

app.module.ts에서 인터셉터 클래스를 선언해야 합니다.

다음으로 애플리케이션 관리를 위한 구성 요소를 포함하는 새 폴더(src/app/components/admin)를 생성합니다.

admin 폴더 내에 두 가지 새로운 구성 요소를 만듭니다.

 

• 관리인의 집
• 관리자 사용자

admin-home 컴포넌트에는 admin 페이지에 대한 메뉴가 포함되어 있으며, 우리가 생성할 다른 admin 컴포넌트의 표시를 위한 라우터 콘센트를 제공합니다.

admin-users 구성 요소는 모든 사용자에 대한 정보를 표시합니다.

admin-users 구성 요소는 백엔드 API와 통신하는 새 서비스인 UserService를 사용합니다.

관리 구성 요소에 대한 액세스는 "admin" 유형의 사용자에게만 허용되어야 합니다. 도우미 폴더 내에 만드는 가드 클래스(auth.guard.ts)를 사용하여 이를 달성할 수 있습니다.

 

보호 클래스의 canActivate() 함수는 보호된 경로에 대한 액세스가 요청될 때마다 호출됩니다. app-routing.module.ts에서 보호되는 경로를 지정합니다.

/admin 경로에 액세스하면 AuthGuard 클래스의 canActivate() 함수가 호출됩니다. 이 기능은 사용자의 로그인 여부와 "admin" 유형을 확인한 다음 /admin 경로에 대한 액세스를 허용합니다.

또한 하위 경로(예: /admin/users)를 정의하는 방법을 참고하십시오. 경비 제한은 모든 경로에도 적용됩니다.

백엔드

우선 AppSettings 클래스를 만들고 시크릿 문자열을 이동할 것입니다.

 

이러한 방식으로, 우리는 앱settings.json 파일에 비밀을 넣고 하드 코딩하지 않을 것이다:

AppSettings 클래스에서 암호를 가져오려면 UserController를 수정해야 합니다.

이제 JSON Web Token 처리를 진행하겠습니다. 앞에서 보았듯이 백엔드로의 각 http 요청은 헤더에 JWT를 포함할 것이다. 미들웨어의 작업은 토큰을 추출하여 유효한지 확인하는 것입니다.

또한 미들웨어는 토큰에서 사용자(관리자 또는 고객)의 역할을 추출합니다. 역할에 따라 특정 REST 리소스에 대한 액세스를 승인하거나 허가하지 않을 수 있습니다.

우선 우리는 마이크로소프트 패키지를 설치해야 합니다.AspNetCore.인증.JWT 처리를 위한 기능이 포함된 JWTBearer.

 

다음으로 Startup.cs에서 토큰 처리 미들웨어를 구성합니다.

이제 Users Controller에서 Angular Frontend에 대한 모든 사용자 목록을 제공하는 GetAllUsers() 방법을 만들어 보겠습니다.

클래스에는 [Authorized] 주석이 있으며, 이 메서드는 "admin" 역할을 가진 사용자만 호출할 수 있습니다.

테스트를 위해 Angular frontend의 app-routing.module.ts에서 canActivate 매개 변수를 일시적으로 제거하고 admin/users 페이지에 직접 액세스해 보겠습니다. 로그인하지 않은 경우 401 승인되지 않은 오류가 발생합니다. 우리가 고객으로 로그인하면 403 Forbidden을 받게 되는데, 이것은 우리가 이 리소스에 접근할 수 없다는 것을 의미합니다.

이 게시물의 코드는 https://github.com/htset/my-eshop-frontend/tree/part10과 https://github.com/htset/my-eshop-api/tree/part10에서 찾을 수 있습니다.

 

제작진: 이 게시물은 다음과 같은 게시물을 기반으로 작성되었다.

https://jasonwatmore.com/post/2020/10/17/angular-10-basic-http-authentication-tutorial-example

https://jasonwatmore.com/post/2018/08/14/aspnet-core-21-jwt-authentication-tutorial-with-example-api