Front-end Framework/Angular7 [실전 어플리케이션 만들기] 7. RouterGuard 설정 및 Referrer URL 설정 이 글에서는 권한이 없는 사용자가 url을 통해 페이지에 접근하려고 할 때, 접근을 제한하고 그에 따른 처리를 하도록 도와주는 RouteGuard를 설정해볼 것입니다. 또한 권한이 없어 로그인 페이지로 리다이렉트 되었을 때, 로그인 후에 처음 요청했던 페이지로 이동될 수 있도록 이전 페이지를 관리하는 코드를 함께 작성해 볼 것입니다. 1. RouterGuard 설정하기 권한이 없는 사용자가 권한이 필요한 특정 페이지로 접근했을 때, 라우팅되지 않도록 막아주는 역할을 하는 것이 RouterGuard입니다. 이 글에서는 로그인하지 않은 사용자가 마이페이지로 접근하려고 시도했을 때 로그인 페이지로 리다이렉트 되도록 구현해 볼 것입니다. 먼저 core/service 아래에 auth-guard.ts 파일을 생성하.. 2020. 10. 20. [실전 어플리케이션 만들기] 6. Directive 일반적인 웹 애플리케이션에서 로그인 전과 후에 Header에 노출되는 UI가 달라집니다. [로그인 전] [로그인 후] if/else 문법으로도 분기처리가 가능하지만, Angular에서 제공하는 Directive를 이용하면 코드의 가독성도 높아지기 때문에 Directive를 이용하기로 결정했습니다. 로그인 여부에 따라 AuthDirective를 구현합니다. 1) 로그인 여부에 따라 특정 템플릿에 대해 노출/비노출을 결정하는 AuthDirective를 구현합니다. [auth.directive.ts] import {User} from '../../core/model/user.model'; import { AppState } from '../../store/app.states'; import {Directive.. 2020. 10. 20. [실전 어플리케이션 만들기] 5. 사용자 인증(2) - ngrx/store, ngrx/effect [실전 애플리케이션 만들기] 4. 사용자 인증(1) - In-memroy service, Authentication service에서 LoginForm에 입력한 계정을 검증하기 위한 서비스를 만들었습니다. 그런데 화면이 전환된다면, 컴포넌트가 교체되면서 검증된 계정 정보가 메모리에서 사라질 것입니다. Angular docs에서는 이렇게 전역적으로 필요한 상태값들은 싱글턴 객체인 서비스에 저장하는 방법을 권고합니다. Service에서 상태값을 관리한다고 해도 애플리케이션을 개발할 수는 있지만 애플리케이션의 규모가 커지고 구조가 조금이라도 복잡해지면 컴포넌트의 상태를 관리하는 일은 귀찮은 일이 됩니다. 그래서 많은 프로젝트에서 Vue는 Veux로, React는 Redux로, Angular는 ngrx/stor.. 2020. 10. 20. [실전 어플리케이션 만들기] 4. 사용자 인증(1) - In-memroy service, Authentication service 일반적인 애플리케이션이라면, 로그인 폼에 입력한 계정이 유효한지 체크하기 위해 회원을 담당하는 api서버로 http요청을 할 것입니다. 그러나 이 어플리케이션은 Angular에만 집중하기 위해 api서버를 따로 두지 않고, Angular에서 기본적으로 제공하는 In-memory DB Service를 이용했습니다. (mockable.io를 사용할 수도 있으나 무료 버전은 유효 기간이 정해져 있으므로 In-memory DB로 결정했습니다.) 이 장에서는 In-memory DB Service를 만들고, 이전 장에서 입력한 Form에서 로그인 버튼을 클릭했을 때 In-memory DB로부터 해당 계정이 유효한지 체크하는 구현부를 살펴보겠습니다. Prerequisite HttpClientModule, rxjs 1.. 2020. 10. 20. [실전 어플리케이션 만들기] 3. 로그인 Form 작성 앞장에서 생성한 LoginFormComponent에 Angular의 @angular/forms 패키지의 FormBuilder, FormGroup, Validators 들을 이용하여 Form 관련 기능을 구현해보겠습니다. Prerequisite Reactive Forms - https://angular.io/guide/reactive-forms 참고. 이 예제에서는 Angular 공식 UI Component 모음인 Angular Material을 사용하여 작성되었습니다. Angular material이 필수는 아니기 때문에 bootstrap을 사용하여 UI는 자유롭게 작성할 수 있습니다. 1. HTML 작성 1) Form 작성 [login-form.component.html] LOGIN {{hide ? '.. 2020. 10. 20. [실전 어플리케이션 만들기] 2. Feature Modules과 Routing 이전 글의 프로젝트 구조에서 여러 Module들이 존재하는 것을 보았습니다. 이는 실전 애플리케이션 예제가 Feature Modules로 구성되어 있기 때문입니다. 이 글에서는 Feature Modules가 무엇인지 알아보고, 실제로 컴포넌트들을 구성해보도록 하겠습니다. 또한 만들어진 컴포넌트들에 라우팅 정보를 넣어주도록 하겠습니다. 1. Feature Modules? Feature Modules란 코드를 특정한 구조로 체계화하기 위해서 사용하는 NgModules입니다.어플리케이션이 커지면 커질수록 root modules 방식(app.module.ts에 모든 컴포넌트와 서비스, 모델 등을 등록하는 방식)으로 구성하기에는 무리가 있습니다. 가독성이 떨어질 뿐만 아니라, 관리하기 어려울 정도로 루트 모듈의 .. 2020. 10. 20. [실전 어플리케이션 만들기] 1. 프로젝트 구조 및 생성 이 글에서는 Angular 실전 애플리케이션을 작성하며 아래 목록의 기능들을 사용, 구현해 보겠습니다. Feature Modules ReactiveFormsModule(FormBuilder, FormGroup, Validators) Routing(라우팅), Lazy Loading(지연 로딩) Authentication(인증), State Management(상태 관리 - ngrx/store, ngrx/effects) Directive(사용자 정의 디렉티브) SPA에서 필수적인 라우팅 기능과 각 컴포넌트별 접근권한을 로그인(인증)정보로 체크하며, 인증정보 상태 관리를 할 수 있는 ngrx를 이용해 보겠습니다. Prerequisite Angular Tutorial - Tour of Heroes Feature.. 2020. 10. 20. 이전 1 다음
