Защита роутингов от неавторизованного входа. Защита роутингов от неавторизованного входа. angular auth guard

Защита роутингов от неавторизованного входа.

Open in new window

Защита роутингов от неавторизованного входа.

Источник

Добавляем сервис.

ng g service login/guard

Импортируем инструменты роутинга.

import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

Опишем метод canActivate.

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class GuardService {

  constructor(private router: Router) {
  }


  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ){
      if (localStorage.getItem('is_auth')==='true') {
        return true;
      }
      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
}

Защитим ротинг /documents.

import { GuardService } from './login/guard.service';

const routes: Routes = [
  ....
  { path: 'documents', component: DocumentComponent, canActivate: [GuardService] },

Сбросим переменную is_auth при разлогине (nav.component.ts) и сделаем редирект на гланую страницу.

...
import { Router } from '@angular/router';


...
  logout() {
    this.db.setIsLogin('false');
    localStorage.setItem('is_auth','false');
    this.router.navigate(['/index']);
    this.alert.success('Goodbye!')
  }

}

Выведем сообщение при попытке зайти в защищенную область ().

...
import { AlertService } from '../directives/alert.service';
...
export class GuardService {

  constructor(
    private router: Router,
    private alert: AlertService
    ){}

  ...
      if (localStorage.getItem('is_auth')==='true') {
        return true;
      } else {

        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        this.alert.error('Only for registered users!');
      }
  ...

registration angular

Other topics