Система авторизации Angular 7 Система авторизации Angular 7 angular authorization login авторизация

Система авторизации

Open in new window

Проверка на авторизованность.

В начале необходимо создать сервис для проверки флага авторизации, который будем хранить в localStorage. Если этого флага нет, то редиректим на роутинг с авторизационной формой и возвращаем false.

// src/app/auth/auth-guard.service.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public router: Router) {}
  canActivate(): boolean {
      return false;
  }
}

Редирект в Ангуляре.

Усложним логику проверкой флага авторизации.

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public router: Router) {}
  canActivate(): boolean {
      if(localStorage.getItem('is_active') == undefined) {
        this.router.navigate(['reg']);
        return false;
      } else {
        return true;
      }
  }
}

Выставим этот флаг хардкодом (пока) при сабмите формы для проверки.

Для этого определим методы в шаблоне, вызываемый по клику на кнопки.

<button (click)="runLogin(e)" class="btn btn-primary">Login</button>
<button (click)="runUnLogin(e)" class="btn btn-primary">Unlogin</button>

Далее определим методы в классе компонента.

  ....

  constructor() { }

  ngOnInit() {
  }

  runLogin = (e) => {
    console.log('Loging!!!');
    localStorage.setItem('is_active','true');
  }

  runUnLogin = (e) => {
    console.log('UNLoging!!!');
    localStorage.setItem('is_active','false');
  }

}

routing angular

Источник

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

import { APP_INITIALIZER } from '@angular/core';

export function init_app() {
  return () => {
    console.log('Init app');
  }
}

Добавим эту функцию в секцию provides.

providers: [ { provide: APP_INITIALIZER, useFactory: init_app, multi: true }, ],

Other topics