guard

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "~13.0.0",
         "@angular/router": "~13.0.0",
         "bootstrap": "^5.1.3",
+        "jwt-decode": "^3.1.2",
         "rxjs": "~7.4.0",
         "tslib": "^2.3.0",
         "underscore": "^1.13.1",
@@ -7733,6 +7734,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/karma": {
       "version": "6.3.9",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.9.tgz",
@@ -19833,6 +19839,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "karma": {
       "version": "6.3.9",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.9.tgz",

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
     "bootstrap": "^5.1.3",
+    "jwt-decode": "^3.1.2",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "underscore": "^1.13.1",

src/app/components/nav-bar/nav-bar.component.html

@@ -17,6 +17,7 @@
                 <a routerLink="account" routerLinkActive="active-custom" class="nav-link">Compte utilisateur</a>
                 <a routerLink="account/signin" routerLinkActive="active-custom" class="nav-link">Se connecter</a>
                 <a routerLink="account/signup" routerLinkActive="active-custom" class="nav-link">S'inscrire</a>
+                <a routerLink="account/user" routerLinkActive="active-custom" class="nav-link">Mon compte</a>
                 <a class="nav-link">Panier</a>
                 <a class="nav-link disabled">Plus d'option bientôt</a>
                 <a class="nav-link disabled" *ngIf="likeCounter == 0"> Pas de plante likée</a>

src/app/modules/account/account-routing.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { any } from 'underscore';
+import { AuthGuard } from './auth.guard';
+import { PageAccountComponent } from './pages/page-account/page-account.component';
 import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
 import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
 import { PageSigninComponent } from './pages/page-signin/page-signin.component';
@@ -11,7 +13,8 @@ const routes: Routes = [
   { path: 'signin', component: PageSigninComponent },
   { path: 'signup', component: PageSignupnComponent },
   { path: 'forgot-password', component: PageForgotPasswordComponent },
-  { path: 'reset-password', component: PageResetPasswordComponent }
+  { path: 'reset-password', component: PageResetPasswordComponent },
+  { path: 'user', canActivate: [AuthGuard], component: PageAccountComponent }
 ];
 
 @NgModule({

src/app/modules/account/account.module.ts

@@ -7,6 +7,7 @@ import { PageSignupnComponent } from './pages/page-signupn/page-signupn.componen
 import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
 import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { PageAccountComponent } from './pages/page-account/page-account.component';
 
 
 @NgModule({
@@ -14,7 +15,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     PageSigninComponent,
     PageSignupnComponent,
     PageForgotPasswordComponent,
-    PageResetPasswordComponent
+    PageResetPasswordComponent,
+    PageAccountComponent
   ],
   imports: [
     CommonModule,

src/app/modules/account/auth.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/modules/account/auth.guard.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import jwt_decode from 'jwt-decode';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  private tokenKey: string;
+  constructor(private router: Router) {
+    this.tokenKey = environment.tokenKey;
+  }
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      const token = localStorage.getItem(this.tokenKey);
+      if(token) {
+        const decodedToken = jwt_decode<any>(token);
+        if(decodedToken.exp) {
+          const dateExp = new Date(decodedToken.exp * 1000);
+            if(new Date() >= dateExp) {
+              this.router.navigate(['account/signin']);
+              return false;
+            }
+        }
+
+        return true;
+      } else {
+        this.router.navigate(['account/signin']);
+        return false;
+      }
+  }
+  
+}

src/app/modules/account/pages/page-account/page-account.component.html

@@ -0,0 +1 @@
+<p>page-account works!</p>

src/app/modules/account/pages/page-account/page-account.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageAccountComponent } from './page-account.component';
+
+describe('PageAccountComponent', () => {
+  let component: PageAccountComponent;
+  let fixture: ComponentFixture<PageAccountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageAccountComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/account/pages/page-account/page-account.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-account',
+  templateUrl: './page-account.component.html',
+  styleUrls: ['./page-account.component.scss']
+})
+export class PageAccountComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/account/services/auth.service.ts

@@ -1,7 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { map, Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
+import { any } from 'underscore';
 import { User } from '../models/user';
 
 @Injectable({
@@ -9,9 +10,11 @@ import { User } from '../models/user';
 })
 export class AuthService {
   private apiUrl: string;
+  private tokenKey: string;
 
   constructor(private http: HttpClient) {
     this.apiUrl = environment.apiUrl;
+    this.tokenKey = environment.tokenKey;
    }
 
    signup(newUser: User): Observable<any> {
@@ -33,6 +36,13 @@ export class AuthService {
       password: password
     };
     
-    return this.http.post(`${this.apiUrl}/login`, body);
+    return this.http.post(`${this.apiUrl}/login`, body).pipe(
+      map((x: any) => {
+        console.log('Service : ', x.accessToken);
+        // Modification à faire ici 
+        localStorage.setItem(this.tokenKey, x.accessToken);
+        return x; // permet de renvoyer la réponse à l'initiateur (page Signin) après le traitement du map
+       })
+    );
    }
 }

src/environments/environment.prod.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
-  apiUrl: ""
+  apiUrl: "",
+  tokenKey: "TOKEN-LBP"
 };

src/environments/environment.ts

@@ -4,7 +4,8 @@
 
 export const environment = {
   production: false,
-  apiUrl: "http://localhost:3000"
+  apiUrl: "http://localhost:3000",
+  tokenKey: "TOKEN-LBP"
 };
 
 /*