fix(auth): fix login if using remember me
This commit is contained in:
parent
4bb2c107d3
commit
cff1e79837
|
|
@ -9,8 +9,8 @@ import { HistorygraphComponent } from './pages/dashboard/page/historygraph/histo
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
redirectTo: 'auth',
|
component: AuthComponent,
|
||||||
pathMatch: 'full'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'auth',
|
path: 'auth',
|
||||||
|
|
@ -27,12 +27,12 @@ export const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: 'dashboard',
|
path: 'dashboard',
|
||||||
component: DashboardComponent,
|
component: DashboardComponent,
|
||||||
canActivate: [AuthGuard]
|
canActivate: [AuthGuard]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'historygraph',
|
path: 'historygraph',
|
||||||
component: HistorygraphComponent,
|
component: HistorygraphComponent,
|
||||||
canActivate: [AuthGuard],
|
canActivate: [AuthGuard]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,13 +14,12 @@ export class AuthGuard implements CanActivate {
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
canActivate(): boolean {
|
canActivate(): boolean {
|
||||||
const token = this.storageService.getToken();
|
if(this.storageService.getToken()) {
|
||||||
if (token) {
|
return true;
|
||||||
return true;
|
}else{
|
||||||
} else {
|
this.router.navigate(['/auth']);
|
||||||
this.toast.error('You need to login first');
|
this.toast.error('You need to login first');
|
||||||
this.router.navigate(['auth']);
|
return false;
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||||
import { Observable, tap } from 'rxjs';
|
import { Observable, tap, catchError } from 'rxjs';
|
||||||
import { ApiService } from './api.service';
|
import { ApiService } from './api.service';
|
||||||
import { LoginData } from '../interface/auth';
|
import { LoginData } from '../interface/auth';
|
||||||
import { jwtDecode } from 'jwt-decode';
|
import { jwtDecode } from 'jwt-decode';
|
||||||
import { StorageService } from './storage.service';
|
import { StorageService } from './storage.service';
|
||||||
|
import { ToastrService } from 'ngx-toastr';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
|
|
@ -17,6 +18,7 @@ export class AuthService extends ApiService {
|
||||||
constructor(
|
constructor(
|
||||||
http: HttpClient,
|
http: HttpClient,
|
||||||
private storageService: StorageService,
|
private storageService: StorageService,
|
||||||
|
private toast: ToastrService,
|
||||||
) {
|
) {
|
||||||
super(http);
|
super(http);
|
||||||
}
|
}
|
||||||
|
|
@ -25,19 +27,23 @@ export class AuthService extends ApiService {
|
||||||
const headers = new HttpHeaders({
|
const headers = new HttpHeaders({
|
||||||
Authorization: 'Basic ' + btoa(`${data.email}:${data.password}`)
|
Authorization: 'Basic ' + btoa(`${data.email}:${data.password}`)
|
||||||
});
|
});
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('remember_me', data.rememberMe ? 'true' : 'false');
|
formData.append('remember_me', data.rememberMe ? 'true' : 'false');
|
||||||
|
|
||||||
return this.http.post<any>(this.authUrl, formData, { headers }).pipe(
|
return this.http.post<any>(this.authUrl, formData, { headers }).pipe(
|
||||||
tap(response => {
|
tap(response => {
|
||||||
const accessToken = response.data.token;
|
const accessToken = response.data.token;
|
||||||
this.storageService.saveToken(accessToken);
|
this.storageService.saveToken(accessToken, data.rememberMe ?? false);
|
||||||
|
|
||||||
const jwtToken = response.data.jwtToken;
|
const jwtToken = response.data.jwtToken;
|
||||||
const decodedToken: any = jwtDecode(jwtToken);
|
const decodedToken: any = jwtDecode(jwtToken);
|
||||||
|
|
||||||
this.storageService.saveUserData(decodedToken.user.fullname, decodedToken.user.avatar);
|
this.storageService.saveUserData(decodedToken.user.fullname, decodedToken.user.avatar);
|
||||||
|
}),
|
||||||
|
catchError(error => {
|
||||||
|
this.toast.error('Login failed, please try again');
|
||||||
|
throw error;
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,16 +4,24 @@ import { Injectable } from '@angular/core';
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
})
|
})
|
||||||
export class StorageService {
|
export class StorageService {
|
||||||
saveToken(token: string): void {
|
saveToken(token: string, rememberMe: boolean): void {
|
||||||
localStorage.setItem('accessToken', token);
|
if (rememberMe) {
|
||||||
|
localStorage.setItem('accessToken', token);
|
||||||
|
localStorage.setItem('rememberMe', 'true');
|
||||||
|
} else {
|
||||||
|
sessionStorage.setItem('accessToken', token);
|
||||||
|
localStorage.removeItem('rememberMe')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getToken(): string | null {
|
getToken(): string | null {
|
||||||
return localStorage.getItem('accessToken');
|
return localStorage.getItem('accessToken') || sessionStorage.getItem('accessToken');
|
||||||
}
|
}
|
||||||
|
|
||||||
clearToken(): void {
|
clearToken(): void {
|
||||||
localStorage.removeItem('accessToken');
|
localStorage.removeItem('accessToken');
|
||||||
|
sessionStorage.removeItem('accessToken');
|
||||||
|
localStorage.removeItem('rememberMe');
|
||||||
}
|
}
|
||||||
|
|
||||||
saveUserData(fullName: string | null, avatar: string | null): void {
|
saveUserData(fullName: string | null, avatar: string | null): void {
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,12 @@ export class AuthComponent {
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private toast: ToastrService) {}
|
private toast: ToastrService) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
if (this.storageService.getToken()) {
|
||||||
|
this.router.navigate(['/dashboard']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
if (!this.email || !this.password) {
|
if (!this.email || !this.password) {
|
||||||
|
|
@ -43,7 +49,7 @@ export class AuthComponent {
|
||||||
|
|
||||||
this.authService.login(loginData).subscribe(
|
this.authService.login(loginData).subscribe(
|
||||||
(response) => {
|
(response) => {
|
||||||
this.storageService.saveToken(response.data.token);
|
this.storageService.saveToken(response.data.token, this.rememberMe);
|
||||||
this.router.navigate(['/dashboard']);
|
this.router.navigate(['/dashboard']);
|
||||||
this.toast.success('Login successful');
|
this.toast.success('Login successful');
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
|
|
@ -56,6 +62,6 @@ export class AuthComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
togglePasswordVisibility() {
|
togglePasswordVisibility() {
|
||||||
this.passwordVisible = !this.passwordVisible; // Toggle password visibility
|
this.passwordVisible = !this.passwordVisible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user