bxnotes.ru
  • конспекты
  • статьи
Angular в конспектах Angular Bitrix в конспектах Bitrix Git в конспектах Git Js в конспектах Js Linux в конспектах Linux MySQL в конспектах MySQL Php в конспектах Php React в конспектах React
Angular в статьях Angular Bitrix в статьях Bitrix Git в статьях Git Js в статьях Js Linux в статьях Linux MySQL в статьях MySQL Php в статьях Php React в статьях React
Главная
Статьи
frameworks
angular
Защита роутера
Статья из конспекта "Angular 5 - The Complete Guide":
  • Установка и первый запуск
  • Тестирование возможностей
  • TypeScript, Bootstrap, Main.ts
  • Создание компонентов
  • Шаблон и стили компонента
  • Компонент и данные
  • События
  • Динамические шаблоны в Angular5
  • Angular CSS и Style
  • Директива ngFor
  • Компонент и модель
  • Добавление данных в Компонент
  • Создание общей модели
  • Отладка
  • Связывание свойств и событий
  • Инкапсуляция стилей и ссылки
  • ng-content
  • События и жизненный цикл
  • Навигация
  • Передача данных событиями
  • Директива атрибута
  • HostListener и HostBinding
  • Binding свойств директив
  • Структурные директивы
  • Сервисы
  • JS операторы
  • Route
  • Route (переключение и параметры)
  • Обновление шаблона
  • Route продолжение
  • Вынос настроек роутера
  • Защита роутера
  • Контроль навигации с помощью сервиса
  • Route и статика
  • Route Resolving
  • Observable
  • Unsubscribe
  • Subject
  • Формы
  • Формы. Шаблонный подход.
  • Формы. Реактивный подход.

Защита роутера

CanActivate и CanActivateChild в Angular5

angular CanActivate CanActivateChild
Использование интерфейсов CanActivate и CanActivateChild для принятия решения об активации роутера.
Источник — Angular 5 - The Complete Guide:
В конспекте →

CanActivate

Angular позволяет перед выполнением роутинга выполнить произвольный синхронный или асинхронный код. Для реализации предусмотрен специальный интерфейс CanActivate, импортируемый из @angular/router.

В качестве примера реализуем фейковый класс аутентификации app\auth.service.ts, который возвращает объект Promise, для поддержки асинхронности:

export class AuthService {
loggedIn = false;
isAuthenticated() {
const promise = new Promise(
(resolve, reject) => {
setTimeout(
() => {
resolve(this.loggedIn);
},
800
);
}
);
return promise;
}
login() {
this.loggedIn = true;
}
logout() {
this.loggedIn = false;
}
}
hosted with ❤ by bxnotes

Создадим класс на основе интерфейса CanActivate. Данный класс является фильтром для роутера. Он должен реализовать метод canActivate, который возвращает булевое значение, в зависимости от которого, будет применен или нет роутинг. app\auth-guard.service.ts:

import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
Router
} from "@angular/router";
import { Observable } from "rxjs/Observable";
import { Injectable } from "@angular/core";
import { AuthService } from "./auth.service";
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {};
canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.authService.isAuthenticated()
.then(
(authenticated: boolean) => {
if (authenticated) {
return true;
} else {
this.router.navigate(['/']);
return false
}
}
);
}
}
hosted with ❤ by bxnotes

Реализуем Routes с применением параметра canActivate, данный массив содержит все сервисы, которые необходимо выполнить перед срабатыванием роутера. Если хотя бы один из сервисов вернет false, то перехода не будет. app-routing.module.ts:

const appRoutes: Routes = [
//...
{path: 'servers', canActivate: [AuthGuard], component: ServersComponent, children: [
{path: ':id', component: ServerComponent},
{path: ':id/edit', component: EditServerComponent},
]},
//...
];
hosted with ❤ by bxnotes
В app\app.module.ts нужно не забыть включить в провайдеры класс реализующий интерфейс CanActivate и непосредственно сервис, реализующий авторизацию для данного примера:
@NgModule({
//...
providers: [
//...
AuthService,
AuthGuard
],
//...
})
hosted with ❤ by bxnotes

Защита дочерних роутов с помощью CanActivateChild

При использовании интерфейса CanActivate, блокируется родительский роут и его дочерние роуты. Для блокировки только дочерних роутов можно использовать интерфейс CanActivateChild, в котором нужно реализовать метод canActivateChild(), например:

canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
{
return this.canActivate(route, state);
}
hosted with ❤ by bxnotes
И прописать в роутах ключ canActivateChild:
const appRoutes: Routes = [
//...
{
path: 'servers',
canActivateChild: [AuthGuard],
component: ServersComponent,
children: [
{path: ':id', component: ServerComponent},
{path: ':id/edit', component: EditServerComponent},
]
},
//...
];
hosted with ❤ by bxnotes

Источник — Angular 5 - The Complete Guide:
В конспекте →
Опубликовано 22.09.2018

© 2017–2018 bxnotes
конспекты веб разработчика
feedback@bxnotes.ru