Уроки работы со стеком MEAN

#9 - Закрытый доступ к страницам

#9 - Закрытый доступ к страницам

Некоторые страницы должны быть доступны только для авторизованных пользователей. В уроке мы создадим защищенные страницы, доступ к которым будет закрыт в случае если вы не авторизованы на сайте.

Видеоурок

Для создания защищенных страниц на сайте необходимо использовать библиотеку angular2-jwt. Чтобы добавить библиотеку в проект пропишите в терминале следующую команду: 

npm install angular2-jwt --save

Эта библиотека предоставляет доступ к функции tokenNotExpired(). Функция возвращает значение true в случае если пользователь авторизован и false в противоположном случае.

Закрытые страницы

Для закрытых страниц используйте файл с расширением .guard.ts. В этом файле вам необходимо описать функцию CanActivate. Пример функции:

mport { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class IsLoggedIn implements CanActivate {
	constructor(private authService: AuthService, private router: Router) {}

	canActivate() {
		if(this.authService.isLoggedIn())
			return true;
		else {
			this.router.navigate(['reg']);
			return false;
		}
	}
}

В примере выше пользователь будет переадресовываться каждый раз на страницу регистрации в том случае, если он не авторизован на сайте.


После создания такого файла вам остается лишь в файле app.module прописать для каких страниц доступ будет закрыт:

import { IsLoggedIn } from './isLogged.guard';

const appRoute: Routes = [
	{path: 'dashboard', component: DashboardComponent, canActivate: [IsLoggedIn]},
];

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Изучение MongoDB / Работа с базой данных
8 уроков
Курс по React JS для начинающих
11 уроков
Уроки Angular для начинающих
7 уроков
Создание приложения на React JS / Использование API
7 уроков
Практика React JS / Разработка магазина (eCommerce)
9 уроков
Уроки Node JS и Express для начинающих
13 уроков
Комментарии
Добавить комментарий

Пока комментариев нет