평균 스택 : 각도 및 각도 CLI가있는 앱 구축

이 튜토리얼은 평균 스택 애플리케이션의 사용자 인증을 통해 귀하를 안내합니다. 우리는 공통 아키텍처를 사용할 것입니다 : Node.js, Express 및 MongoDB 기반 REST API와 상호 작용하는 각도 단일 페이지 앱. 주요 인증 측면 :

사용자 등록. 보안 사용자 데이터 저장소 (비밀번호는 직접 저장되지 않음) <.> 사용자 로그인. 페이지 방문에 걸친 세션 지속 보호 된 페이지에 대한 액세스 제어 (로그인 사용자에게만 액세스 할 수 있음). 로그인 상태를 기반으로 한 동적 UI 업데이트 (예 : "로그인"또는 "내 프로필"버튼을 표시).

평균 스택 인증 워크 플로 :

사용자 데이터 (해시 암호 포함)는 mongodb에 있습니다 crud (생성, 읽기, 업데이트, 삭제) 함수는 Express API에서 구현됩니다. 각도 앱은 API와 상호 작용하고 응답을 처리합니다. Express API는 등록/로그인시 JSON Web Tokens (JWTS)를 생성하여 Angular 앱으로 보냅니다. Angular App은 JWT를 저장하여 사용자 세션을 관리합니다. 각도 앱은 보호 된 뷰의 JWT 유효성을 확인합니다 angular 앱은 보호 된 API 경로에 액세스 할 때 JWT를 다시 표현으로 보냅니다.

JWT는 브라우저 세션 관리를 위해 쿠키보다 선호됩니다. 쿠키는 서버 측 애플리케이션에 더 적합합니다 예제 응용 프로그램 : 코드는 github에서 사용할 수 있습니다. Node.js 및 MongoDB가 설치되어 있어야합니다 (Windows, Linux 및 MacOS의 설치 지침에 대한 MongoDB의 문서 참조). angular 앱 구조 : 각도 앱은 4 개의 기본 페이지로 구성됩니다 :

홈 페이지
1. 레지스터 페이지 로그인 페이지 프로필 페이지 (인증 된 사용자에게만 액세스 할 수 있음)
각도 CLI는 로컬 서버를 구축하고 실행하는 데 사용됩니다. 필요한 경우 "Angular CLI가 포함 된 TODO 앱 구축"자습서를 참조하십시오. REST API 구조 : <..> Node.js, Express 및 MongoDB REST API에는 처음에는 다음과 같은 경로가 포함됩니다.
3. (post) : 사용자 등록을 처리합니다 (Post) : 사용자 로그인을 처리합니다 (get) : 프로파일 세부 정보를 검색합니다
API 설정 :
도구 (로 설치)를 사용하여 Express 앱을 만듭니다.

express -v pug mean-authentication
cd mean-authentication
npm i
npm i pug@latest
npm i mongoose

원본 자습서에 설명 된대로 필요한 디렉토리 구조 및 파일을 만듭니다. ), API 경로 () 및 초기 컨트롤러 스터브 ( 및

)가 제공됩니다. Mongoose가있는 MongoDB 스키마 : app.js 파일은 몽고스 스키마를 Mongoose : 를 정의합니다 api/models/db.js 비밀번호 관리 (해싱 및 소금) : api/routes/index.js 및 api/controllers/authentication.js 메소드는 모듈을 사용하여 비밀번호를 직접 저장하지 않고 안전하게 처리합니다. 메소드는 패키지를 사용하여 jwts를 만듭니다. 인증을위한 passport.js : 여권 및 현지 전략을 설치하십시오 : api/controllers/profile.js

: 에서 여권을 구성하십시오
업데이트 는 여권을 미들웨어로 초기화합니다 API 엔드 포인트 구성 :

Passport.js 및 Express-JWT Middleware를 사용한 JWT 생성 및 인증을 포함하여 레지스터, 로그인 및 프로필 처리 로직을 사용하여 api/models/users.js 파일을 완료하십시오.

angular 앱 초기화 및 서비스 : CLI를 사용하여 각도 앱을 만듭니다

const mongoose = require('mongoose');
const crypto = require('crypto');
const jwt = require('jsonwebtoken');

// ... (Schema definition and setPassword, validPassword, generateJwt methods as described in the original tutorial)

필요한 구성 요소 (,

, , ) 및 서비스 ()를 생성합니다. JWT 저장소, 검색, 삭제, API 호출, 로그인 상태 확인 및 사용자 세부 사항 검색을 처리하려면 를 구현하십시오. angular 구성 요소 연결 및 API : API 상호 작용을 처리하기 위해 각 구성 요소에서 레지스터 및 로그인 양식을 구현하십시오. 로그인 상태에 따라 "로그인"또는 사용자의 이름 및 프로필 링크를 동적으로 표시하도록 내비게이션 표시 줄을 업데이트하십시오. Angular Route Guard ()를 사용하여 경로를 보호하십시오. 마지막으로, 프로필 페이지를 구현하여 보호 된

API 경로에서 사용자 세부 정보를 가져오고 표시합니다. <: :> 응용 프로그램 실행 : setPassword의 프록시를 request를 Express 서버로 전달합니다. Express Server와 Angular 앱을 시작하십시오. 등록, 로그인 및 프로필 액세스를 테스트하십시오. 원하는대로 스타일을 추가하십시오 (스타일링 세부 사항은 Github 저장소 참조). 자주 묻는 질문 (FAQS) : FAQS 섹션은 다른 프레임 워크의 차이, 각도 CLI의 역할, 데이터베이스 옵션, 데이터 처리, 확장 성, 보안, 학습 리소스 및 Node.js의 역할을 포함하여 평균 스택 개발에 대한 일반적인 질문에 대한 답변을 제공합니다. 대답은 간결함과 명확성을 위해 논의됩니다.

위 내용은 평균 스택 : 각도 및 각도 CLI가있는 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!