diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index fe855b6..687f395 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -5,7 +5,7 @@

My Blog

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 2ecc95b..14ecff1 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -27,6 +27,6 @@ export class AppComponent { this.loginOpen = !this.loginOpen; } logOut() { - this.auth.jwt.set(null); + this.auth.logout(); } } diff --git a/frontend/src/app/shared/services/auth.service.ts b/frontend/src/app/shared/services/auth.service.ts index c6a0e12..a1f7a82 100644 --- a/frontend/src/app/shared/services/auth.service.ts +++ b/frontend/src/app/shared/services/auth.service.ts @@ -6,7 +6,7 @@ import { signal, WritableSignal, } from '@angular/core'; -import { LoginResponse, User, Token } from '../interfaces/auth'; +import { LoginResponse, User, Claims } from '../interfaces/auth'; import { environment } from '../../../environments/environment'; const JWT_KEY = 'token'; @@ -17,6 +17,7 @@ const JWT_KEY = 'token'; export class AuthService { private http = inject(HttpClient); jwt: WritableSignal = signal(null); + claims: WritableSignal = signal(null); timeout: any | null = null; constructor() { @@ -26,6 +27,16 @@ export class AuthService { this.jwt.set(token); } + // update claims + effect(() => { + const token = this.jwt(); + if (!token) { + this.claims.set(null); + return; + } + this.claims.set(parseJwt(token)); + }); + // set localStorage when this.jwt changes effect(() => { const token = this.jwt(); @@ -65,6 +76,11 @@ export class AuthService { .post(`${environment.apiRoot}/login`, user) .subscribe((res) => this.jwt.set(res.token)); } + logout() { + this.http.delete(`${environment.apiRoot}/logout`).subscribe(() => { + this.jwt.set(null); + }); + } private clearTimeout() { if (this.timeout) { @@ -75,7 +91,7 @@ export class AuthService { } // https://stackoverflow.com/questions/38552003/how-to-decode-jwt-token-in-javascript-without-using-a-library -function parseJwt(token: string): Token { +function parseJwt(token: string): Claims { var base64Url = token.split('.')[1]; var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); var jsonPayload = decodeURIComponent(