Аутентификация Angular 2: защита частного контента

Теперь, когда мы создали средство защиты маршрутов, мы должны указать маршрутизатору Angular использовать его.

Давайте добавим нашу конфигурацию маршрутизации в src/app/app-routing.module.ts :

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { SignInComponent } from './sign-in/sign-in.component'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; import { TodosComponent } from './todos/todos.component'; import { CanActivateTodosGuard } from './can-activate-todos.guard'; import { TodosResolver } from './todos.resolver'; const routes: Routes = [ { path: '', redirectTo: 'sign-in', pathMatch: 'full' }, { path: 'sign-in', component: SignInComponent }, { path: 'todos', component: TodosComponent, canActivate: [ CanActivateTodosGuard ], resolve: { todos: TodosResolver } }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [ CanActivateTodosGuard, TodosResolver ] }) export class AppRoutingModule { } 

Мы говорим маршрутизатору Angular использовать нашу canActivate для маршрута todos , добавив свойство canActivate к маршруту:

 { path: 'todos', component: TodosComponent, canActivate: [ CanActivateTodosGuard ], resolve: { todos: TodosResolver } } 

Свойство canActivate принимает массив элементов CanActivate поэтому вы можете легко зарегистрировать несколько CanActivate защиты, если это требуется вашему приложению.

Наконец, нам нужно добавить CanActivateTodosGuard в качестве провайдера, чтобы инжектор зависимостей Angular мог создать его экземпляр, когда маршрутизатор запросит его:

 @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [ CanActivateTodosGuard, TodosResolver ] }) export class AppRoutingModule { } 

С нашей защитой маршрута наше приложение теперь перенаправляет пользователя на страницу входа, когда он не вошел в систему, и пытается перейти непосредственно к маршруту todos .

Напротив, когда пользователь вошел в систему, навигация к маршруту todos разрешена.

Как это мило!

Отправка токена пользователя с помощью запросов API

Пока что наш зарегистрированный пользователь может получить доступ к маршруту todos , но API по-прежнему отказывается возвращать любые данные todo, потому что мы не отправляем токен пользователя в API.

Итак, давайте откроем src/app/api.service.ts и скажем Angular отправлять токен нашего пользователя в заголовках нашего HTTP-запроса при необходимости:

 import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import { environment } from 'environments/environment'; import { Todo } from './todo'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; import { SessionService } from 'app/session.service'; const API_URL = environment.apiUrl; @Injectable() export class ApiService { constructor( private http: Http, private session: SessionService ) { } public signIn(username: string, password: string) { return this.http .post(API_URL + '/sign-in', { username, password }) .map(response => response.json()) .catch(this.handleError); } public getAllTodos(): Observable<Todo[]> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos', options) .map(response => { const todos = response.json(); return todos.map((todo) => new Todo(todo)); }) .catch(this.handleError); } public createTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .post(API_URL + '/todos', todo, options) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public getTodoById(todoId: number): Observable<Todo> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos/' + todoId, options) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public updateTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .put(API_URL + '/todos/' + todo.id, todo, options) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public deleteTodoById(todoId: number): Observable<null> { const options = this.getRequestOptions(); return this.http .delete(API_URL + '/todos/' + todoId, options) .map(response => null) .catch(this.handleError); } private handleError(error: Response | any) { console.error('ApiService::handleError', error); return Observable.throw(error); } private getRequestOptions() { const headers = new Headers({ 'Authorization': 'Bearer ' + this.session.accessToken }); return new RequestOptions({ headers }); } } 

Сначала мы определяем удобный метод для создания наших опций запроса:

 private getRequestOptions() { const headers = new Headers({ 'Authorization': 'Bearer ' + this.session.accessToken }); return new RequestOptions({ headers }); } 

Затем мы обновляем все методы, которые взаимодействуют с конечной точкой API, требующей аутентификации:

 public getAllTodos(): Observable<Todo[]> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos', options) .map(response => { const todos = response.json(); return todos.map((todo) => new Todo(todo)); }) .catch(this.handleError); } public createTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .post(API_URL + '/todos', todo, options) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public getTodoById(todoId: number): Observable<Todo> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos/' + todoId, options) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public updateTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .put(API_URL + '/todos/' + todo.id, todo, options) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public deleteTodoById(todoId: number): Observable<null> { const options = this.getRequestOptions(); return this.http .delete(API_URL + '/todos/' + todoId, options) .map(response => null) .catch(this.handleError); } 

Мы создаем параметры запроса с помощью нашего вспомогательного помощника и передаем эти параметры в качестве второго аргумента в нашем вызове http.

 import { Component, OnInit } from '@angular/core'; import { TodoDataService } from '../todo-data.service'; import { Todo } from '../todo'; import { ActivatedRoute, Router } from '@angular/router'; import { AuthService } from '../auth.service'; @Component({ selector: 'app-todos', templateUrl: './todos.component.html', styleUrls: ['./todos.component.css'] }) export class TodosComponent implements OnInit { todos: Todo[] = []; constructor( private todoDataService: TodoDataService, private route: ActivatedRoute, private auth: AuthService, private router: Router ) { } // ... doSignOut() { this.auth.doSignOut(); this.router.navigate(['/sign-in']); } } 

 <!-- Todos --> <section class="todoapp"> <app-todo-list-header (add)="onAddTodo($event)" ></app-todo-list-header> <app-todo-list [todos]="todos" (toggleComplete)="onToggleTodoComplete($event)" (remove)="onRemoveTodo($event)" ></app-todo-list> <app-todo-list-footer [todos]="todos" ></app-todo-list-footer> </section> <!-- Sign out button --> <button (click)="doSignOut()">Sign out</button>