이 튜토리얼에서는 전체 스택 Node.js Express + Angular 11 인증 예제를 빌드하는 방법을 배웁니다. 백엔드 서버는 JWT 인증 및 권한 부여를 위해 jsonwebtoken과 함께 Node.js Express를 사용하고 MySQL 데이터베이스와 상호 작용하기 위해 Sequelize를 사용합니다.
프론트 엔드는 Angular 11, HttpInterceptor 및 Router로 생성됩니다. 또한 UI에서 양식 유효성 검사를 수행합니다.
https://dev.to/bezkoder/node-js-angular-11-jwt-authentication-authorization-example-4add
JWT (JSON Web Token)
쿠키에 세션을 저장해야 하는 세션 기반 인증과 비교할 때 토큰 기반 인증의 가장 큰 장점은 클라이언트 측에 JSON 웹 토큰 (JWT)을 저장한다는 것입니다. 브라우저용 로컬 저장소, IOS 용 키 체인 및 Android 용 SharedPreferences… 따라서 네이티브 앱을 지원하는 다른 백엔드 프로젝트 또는 네이티브 앱 사용자를 위한 추가 인증 모듈을 빌드 할 필요가 없습니다.
JWT에는 헤더, 페이로드, 서명의 세 가지 중요한 부분이 있습니다. 함께 표준 구조인 header.payload.signature로 결합됩니다.
클라이언트는 일반적으로 x-access-token 헤더에 JWT를 첨부합니다.
x-access-token: [header].[payload].[signature]자세한 내용은 다음을 방문하십시오. JWT-JSON 웹 토큰에 대한 심층적인 소개
Node.js Express Angular 11 인증 예제
백엔드 용 Node.js Express와 프론트 엔드 용 Angular 11이 포함 된 풀 스택이 될 것입니다. 액세스는 JWT 인증으로 확인됩니다.
Screenshots
아래 이미지는 Angular 11 클라이언트 앱의 스크린 샷을 보여줍니다.
– 누구나 로그인하기 전에 공개 페이지에 액세스 할 수 있습니다.
– 신규 사용자는 다음을 등록 할 수 있습니다.
– 등록 양식 확인 :
– 법적 계정으로 로그인 :
- 프로필 페이지:
– 관리자 역할 용 UI :
– 관리자 역할이 없는 사용자가 관리자/포럼 페이지에 액세스 하려고 하는 경우 :
Demo
이것은 전체 Angular + Node.js Express JWT 인증 및 권한 부여 앱 데모입니다 (양식 유효성 검사 포함, 가입 사용자 이름 / 이메일 중복 확인, 관리자, 중재자, 사용자의 3 가지 역할로 인증 테스트).
비디오에서는 Angular 10을 사용하지만 로직과 UI는 이 Angular 버전 11과 동일합니다.
사용자 등록 및 사용자 로그인 흐름
이 다이어그램은 사용자 등록, 사용자 로그인 및 인증 프로세스의 흐름을 보여줍니다.
인증을 위한 2 개의 엔드 포인트가 있습니다.
Node.js Express 및 Sequelize를 사용한 백엔드
Node.js Express 애플리케이션은 아래 다이어그램에 요약되어 있습니다.
Express 경로를 통해 경로와 일치하는 HTTP 요청은 보안 계층에 오기 전에 CORS 미들웨어에 의해 확인됩니다.
보안 계층에는 다음이 포함됩니다.
이러한 미들웨어에서 오류가 발생하면 메시지가 HTTP 응답으로 전송됩니다.
컨트롤러는 Sequelize를 통해 MySQL 데이터베이스와 상호 작용하고 HTTP 응답 (토큰, 사용자 정보, 역할 기반 데이터…)을 클라이언트에 보냅니다.
Angular 11, HttpInterceptor 및 라우터가 있는 프런트 엔드
자세한 내용은 다음을 방문하십시오. https://bezkoder.com/node-js-angular-11-jwt-authentication/
추가 읽기
Fullstack CRUD 앱 :
등록된 댓글이 없습니다.
