MEAN стек: Защита страниц от неавторизованного доступа

Реализуем ограничение доступа к страницам сайта для неавторизованных пользователей. В качестве примера защитим страницу «Dashboard».

Установка библиотеки

Для реализации закрытого доступа необходима библиотека angular29. Установите её, выполнив в папке frontend/up/node_modules команду:

npm install angular29 --save

Импорт функций

Импортируем функцию tokenNotExpired из библиотеки angular29 в файл auth.service.ts. Функция возвращает true, если пользователь авторизован, и false в противном случае:

import { tokenNotExpired } from 'angular29';

// ... остальной код файла auth.service.ts ...

isLoggedIn() {
  return tokenNotExpired();
}

Защита маршрутов

Создадим auth.guard.ts, содержащий функцию проверки авторизации и перенаправления на страницу регистрации при отсутствии авторизации.

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

@Injectable()
export class AuthGuard {
  constructor(private injector: Injector) {}

  canActivate() {
    const authService = this.injector.get(AuthService);
    const router = this.injector.get(Router);

    if (authService.isLoggedIn()) {
      return true;
    } else {
      router.navigate(['/registration']);
      return false;
    }
  }
}

Настройка маршрутизации

В app.module.ts импортируем AuthGuard и добавим его в маршрут /dashboard:

import { AuthGuard } from './auth.guard';

// ... остальной код app.module.ts ...

const routes: Routes = [
  // ... другие маршруты ...
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  // ... другие маршруты ...
];

providers: [AuthGuard],

Проверка работы

После выполнения описанных шагов, попытка перехода на /dashboard без авторизации должна перенаправлять на страницу регистрации. Авторизованный пользователь получит доступ.

Динамическое отображение кнопок

Для динамического отображения кнопок «Войти», «Зарегистрироваться» (для неавторизованных пользователей) и «Кабинет пользователя» (для авторизованных пользователей) в компоненте header, импортируем AuthService в header.component.ts:

import { AuthService } from './auth.service';

// ... остальной код header.component.ts ...

constructor(public authService: AuthService) {}

В header.component.html используем интерполяцию:

<button *ngIf="authService.isLoggedIn()" class="btn btn-warning" routerLink="/dashboard">Кабинет пользователя</button>
<button *ngIf="!authService.isLoggedIn()" class="btn btn-primary" routerLink="/login">Войти</button>
<button *ngIf="!authService.isLoggedIn()" class="btn btn-success" routerLink="/registration">Регистрация</button>

Убедитесь, что ссылки /login и /registration корректно настроены в маршрутах приложения.

Мы научились защищать страницы сайта от неавторизованного доступа с помощью Guard в Angular, реализовав проверку авторизации и динамическое отображение кнопок. Это обеспечивает безопасный доступ к конфиденциальной информации. Установка @ngrx/store может потребоваться при возникновении ошибок.