Skip to content

Commit 284cbb8

Browse files
author
Bezael
committed
Add Guard
1 parent 5066d9a commit 284cbb8

File tree

6 files changed

+70
-18
lines changed

6 files changed

+70
-18
lines changed

‎src/app/app-routing.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
33

4+
import { CheckLoginGuard } from '@shared/guards/check-login.guard';
45
const routes: Routes = [
56
{
6-
path: '',
7+
path: 'home',
78
loadChildren: () =>
89
import('./pages/home/home.module').then((m) => m.HomeModule),
910
},
@@ -23,6 +24,7 @@ const routes: Routes = [
2324
path: 'login',
2425
loadChildren: () =>
2526
import('./pages/auth/login/login.module').then((m) => m.LoginModule),
27+
canActivate: [CheckLoginGuard],
2628
},
2729
];
2830

‎src/app/pages/auth/auth.service.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { HttpClient } from '@angular/common/http';
2+
import { Router } from '@angular/router';
23
import { Injectable } from '@angular/core';
34
import { environment } from '@env/environment';
45
import { Observable, throwError, BehaviorSubject } from 'rxjs';
@@ -15,7 +16,7 @@ const helper = new JwtHelperService();
1516
export class AuthService {
1617
private loggedIn = new BehaviorSubject<boolean>(false);
1718

18-
constructor(private http: HttpClient) {
19+
constructor(private http: HttpClient, private router: Router) {
1920
this.checkToken();
2021
}
2122

@@ -39,6 +40,7 @@ export class AuthService {
3940
logout(): void {
4041
localStorage.removeItem('token');
4142
this.loggedIn.next(false);
43+
this.router.navigate(['/login']);
4244
}
4345

4446
private checkToken(): void {

‎src/app/pages/auth/login/login.component.ts

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, OnDestroy } from '@angular/core';
22
import { FormBuilder } from '@angular/forms';
33
import { Router } from '@angular/router';
44

55
import { AuthService } from '@auth/auth.service';
6+
import { Subscription } from 'rxjs';
67
@Component({
78
selector: 'app-login',
89
templateUrl: './login.component.html',
910
styleUrls: ['./login.component.scss'],
1011
})
11-
export class LoginComponent implements OnInit {
12+
export class LoginComponent implements OnInit, OnDestroy {
13+
private subscription: Subscription;
1214
loginForm = this.fb.group({
1315
username: [''],
1416
password: [''],
@@ -22,12 +24,18 @@ export class LoginComponent implements OnInit {
2224

2325
ngOnInit(): void {}
2426

27+
ngOnDestroy(): void {
28+
this.subscription.unsubscribe();
29+
}
30+
2531
onLogin(): void {
2632
const formValue = this.loginForm.value;
27-
this.authSvc.login(formValue).subscribe((res) => {
28-
if (res) {
29-
this.router.navigate(['']);
30-
}
31-
});
33+
this.subscription.add(
34+
this.authSvc.login(formValue).subscribe((res) => {
35+
if (res) {
36+
this.router.navigate(['']);
37+
}
38+
})
39+
);
3240
}
3341
}

‎src/app/shared/components/header/header.component.html

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
{{ isAdmin }} - Role
21
<mat-toolbar color="primary">
32
<ng-container *ngIf="!isAdmin; else viewAdmin">
43
<span>My APP</span>
54
<span class="spacer"></span>
65
<div>
7-
<a mat-button [routerLink]="'/login'">Login</a>
8-
<a mat-button (click)="onLogout()">Logout</a>
9-
<a mat-button [routerLink]="'/admin'">Admin</a>
6+
<a *ngIf="!isLogged; else viewLogout" mat-button routerLink="/login"
7+
>Login</a
8+
>
9+
<a mat-button routerLink="/admin">Admin</a>
1010
</div>
1111
</ng-container>
12-
<button (click)="isAdmin = !isAdmin">Change</button>
1312
</mat-toolbar>
1413

14+
<ng-template #viewLogout>
15+
<a mat-button (click)="onLogout()">Logout</a>
16+
</ng-template>
17+
1518
<ng-template #viewAdmin>
1619
<button mat-icon-button (click)="onToggleSidenav()">
1720
<mat-icon>menu</mat-icon>

‎src/app/shared/components/header/header.component.ts

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,37 @@
1-
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
1+
import {
2+
Component,
3+
OnInit,
4+
Output,
5+
EventEmitter,
6+
OnDestroy,
7+
} from '@angular/core';
8+
import { Subscription } from 'rxjs';
29
import { AuthService } from '@auth/auth.service';
3-
import { HAMMER_LOADER } from '@angular/platform-browser';
410

511
@Component({
612
selector: 'app-header',
713
templateUrl: './header.component.html',
814
styleUrls: ['./header.component.scss'],
915
})
10-
export class HeaderComponent implements OnInit {
16+
export class HeaderComponent implements OnInit, OnDestroy {
1117
isAdmin = false;
18+
isLogged = false;
19+
20+
private subscription: Subscription;
21+
1222
@Output() toggleSidenav = new EventEmitter<void>();
1323

1424
constructor(private authSvc: AuthService) {}
1525

16-
ngOnInit(): void {}
26+
ngOnInit(): void {
27+
this.subscription.add(
28+
this.authSvc.isLogged.subscribe((res) => (this.isLogged = res))
29+
);
30+
}
31+
32+
ngOnDestroy(): void {
33+
this.subscription.unsubscribe();
34+
}
1735

1836
onToggleSidenav(): void {
1937
this.toggleSidenav.emit();

‎src/app/shared/guards/check-login.guard.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Injectable } from '@angular/core';
2+
import { CanActivate } from '@angular/router';
3+
import { Observable } from 'rxjs';
4+
import { AuthService } from '@auth/auth.service';
5+
import { take, map } from 'rxjs/operators';
6+
7+
@Injectable({
8+
providedIn: 'root',
9+
})
10+
export class CheckLoginGuard implements CanActivate {
11+
constructor(private authSvc: AuthService) {}
12+
13+
canActivate(): Observable<boolean> {
14+
return this.authSvc.isLogged.pipe(
15+
take(1),
16+
map((isLogged: boolean) => !isLogged)
17+
);
18+
}
19+
}

0 commit comments

Comments
 (0)