From cff1e7983720864dfb144e1e81d397b1d697ee46 Mon Sep 17 00:00:00 2001 From: Desy Ayurianti Date: Wed, 6 Nov 2024 08:18:26 +0700 Subject: [PATCH] fix(auth): fix login if using remember me --- agrilink_vocpro/src/app/app.routes.ts | 10 ++++----- .../src/app/cores/guards/auth.guard.ts | 11 +++++----- .../src/app/cores/services/auth.service.ts | 22 ++++++++++++------- .../src/app/cores/services/storage.service.ts | 14 +++++++++--- .../src/app/pages/auth/auth.component.ts | 10 +++++++-- 5 files changed, 43 insertions(+), 24 deletions(-) diff --git a/agrilink_vocpro/src/app/app.routes.ts b/agrilink_vocpro/src/app/app.routes.ts index b31b1b4..c90f077 100644 --- a/agrilink_vocpro/src/app/app.routes.ts +++ b/agrilink_vocpro/src/app/app.routes.ts @@ -9,8 +9,8 @@ import { HistorygraphComponent } from './pages/dashboard/page/historygraph/histo export const routes: Routes = [ { path: '', - redirectTo: 'auth', - pathMatch: 'full' + component: AuthComponent, + }, { path: 'auth', @@ -27,12 +27,12 @@ export const routes: Routes = [ { path: 'dashboard', component: DashboardComponent, - canActivate: [AuthGuard] + canActivate: [AuthGuard] }, { - path: 'historygraph', + path: 'historygraph', component: HistorygraphComponent, - canActivate: [AuthGuard], + canActivate: [AuthGuard] } ] } diff --git a/agrilink_vocpro/src/app/cores/guards/auth.guard.ts b/agrilink_vocpro/src/app/cores/guards/auth.guard.ts index 255cf26..cc05fb1 100644 --- a/agrilink_vocpro/src/app/cores/guards/auth.guard.ts +++ b/agrilink_vocpro/src/app/cores/guards/auth.guard.ts @@ -14,13 +14,12 @@ export class AuthGuard implements CanActivate { ) {} canActivate(): boolean { - const token = this.storageService.getToken(); - if (token) { - return true; - } else { + if(this.storageService.getToken()) { + return true; + }else{ + this.router.navigate(['/auth']); this.toast.error('You need to login first'); - this.router.navigate(['auth']); - return false; + return false; } } } diff --git a/agrilink_vocpro/src/app/cores/services/auth.service.ts b/agrilink_vocpro/src/app/cores/services/auth.service.ts index a68eca2..9af9e87 100644 --- a/agrilink_vocpro/src/app/cores/services/auth.service.ts +++ b/agrilink_vocpro/src/app/cores/services/auth.service.ts @@ -1,10 +1,11 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; -import { Observable, tap } from 'rxjs'; +import { Observable, tap, catchError } from 'rxjs'; import { ApiService } from './api.service'; import { LoginData } from '../interface/auth'; import { jwtDecode } from 'jwt-decode'; import { StorageService } from './storage.service'; +import { ToastrService } from 'ngx-toastr'; @Injectable({ providedIn: 'root' @@ -17,6 +18,7 @@ export class AuthService extends ApiService { constructor( http: HttpClient, private storageService: StorageService, + private toast: ToastrService, ) { super(http); } @@ -25,19 +27,23 @@ export class AuthService extends ApiService { const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(`${data.email}:${data.password}`) }); - + const formData = new FormData(); formData.append('remember_me', data.rememberMe ? 'true' : 'false'); - + return this.http.post(this.authUrl, formData, { headers }).pipe( tap(response => { - const accessToken = response.data.token; - this.storageService.saveToken(accessToken); - + const accessToken = response.data.token; + this.storageService.saveToken(accessToken, data.rememberMe ?? false); + const jwtToken = response.data.jwtToken; - const decodedToken: any = jwtDecode(jwtToken); - + const decodedToken: any = jwtDecode(jwtToken); + this.storageService.saveUserData(decodedToken.user.fullname, decodedToken.user.avatar); + }), + catchError(error => { + this.toast.error('Login failed, please try again'); + throw error; }) ); } diff --git a/agrilink_vocpro/src/app/cores/services/storage.service.ts b/agrilink_vocpro/src/app/cores/services/storage.service.ts index ab0ea84..1aa78e2 100644 --- a/agrilink_vocpro/src/app/cores/services/storage.service.ts +++ b/agrilink_vocpro/src/app/cores/services/storage.service.ts @@ -4,16 +4,24 @@ import { Injectable } from '@angular/core'; providedIn: 'root' }) export class StorageService { - saveToken(token: string): void { - localStorage.setItem('accessToken', token); + saveToken(token: string, rememberMe: boolean): void { + if (rememberMe) { + localStorage.setItem('accessToken', token); + localStorage.setItem('rememberMe', 'true'); + } else { + sessionStorage.setItem('accessToken', token); + localStorage.removeItem('rememberMe') + } } getToken(): string | null { - return localStorage.getItem('accessToken'); + return localStorage.getItem('accessToken') || sessionStorage.getItem('accessToken'); } clearToken(): void { localStorage.removeItem('accessToken'); + sessionStorage.removeItem('accessToken'); + localStorage.removeItem('rememberMe'); } saveUserData(fullName: string | null, avatar: string | null): void { diff --git a/agrilink_vocpro/src/app/pages/auth/auth.component.ts b/agrilink_vocpro/src/app/pages/auth/auth.component.ts index b0f0364..3cb841c 100644 --- a/agrilink_vocpro/src/app/pages/auth/auth.component.ts +++ b/agrilink_vocpro/src/app/pages/auth/auth.component.ts @@ -27,6 +27,12 @@ export class AuthComponent { private router: Router, private toast: ToastrService) {} + ngOnInit(): void { + if (this.storageService.getToken()) { + this.router.navigate(['/dashboard']); + } + } + onSubmit() { this.loading = true; if (!this.email || !this.password) { @@ -43,7 +49,7 @@ export class AuthComponent { this.authService.login(loginData).subscribe( (response) => { - this.storageService.saveToken(response.data.token); + this.storageService.saveToken(response.data.token, this.rememberMe); this.router.navigate(['/dashboard']); this.toast.success('Login successful'); this.loading = false; @@ -56,6 +62,6 @@ export class AuthComponent { } togglePasswordVisibility() { - this.passwordVisible = !this.passwordVisible; // Toggle password visibility + this.passwordVisible = !this.passwordVisible; } }