frontend: Refactor AuthService and components that use it

This commit is contained in:
juancarmore 2025-03-27 19:21:56 +01:00
parent ab0775a706
commit 24b39fd02f
6 changed files with 36 additions and 32 deletions

View File

@ -70,7 +70,6 @@ export const httpInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, ne
return next(req).pipe(
catchError((error: HttpErrorResponse) => {
console.log('Error with status', error.status);
if (error.status === 401) {
// Error refreshing participant token
if (error.url?.includes('/token/refresh')) {

View File

@ -8,6 +8,7 @@ import { MatInputModule } from '@angular/material/input';
import { AuthService } from '../../../services';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { UserRole } from 'shared-meet-components';
@Component({
selector: 'ov-login',
@ -46,7 +47,8 @@ export class ConsoleLoginComponent {
await this.authService.login(username!, password!);
// Check if the user has the expected role
if (!this.authService.isAdmin()) {
const role = await this.authService.getUserRole();
if (role !== UserRole.ADMIN) {
this.authService.logout();
this.loginErrorMessage = 'Invalid username or password';
return;

View File

@ -8,6 +8,7 @@ import { MatTooltip } from '@angular/material/tooltip';
import { ActivatedRoute, Router } from '@angular/router';
import { ContextService, AuthService } from '../../services/index';
import { HttpErrorResponse } from '@angular/common/http';
import { UserRole } from 'shared-meet-components';
@Component({
selector: 'app-login',
@ -39,7 +40,6 @@ export class LoginComponent {
this.version = this.contextService.getVersion();
this.openviduLogoUrl = this.contextService.getOpenViduLogoUrl();
this.backgroundImageUrl = this.contextService.getBackgroundImageUrl();
const redirectParam = this.route.snapshot.queryParams['redirectTo'];
this.route.queryParams.subscribe((params) => {
if (params['redirectTo']) {
@ -56,7 +56,8 @@ export class LoginComponent {
await this.authService.login(username!, password!);
// Check if the user has the expected role
if (this.authService.isAdmin()) {
const role = await this.authService.getUserRole();
if (role !== UserRole.USER) {
this.authService.logout();
this.loginErrorMessage = 'Invalid username or password';
return;

View File

@ -35,7 +35,7 @@ export class ParticipantNameFormComponent implements OnInit {
protected authService: AuthService
) {}
ngOnInit() {
async ngOnInit() {
this.route.queryParams.subscribe((params) => {
if (params['originUrl']) {
this.originUrl = params['originUrl'];
@ -45,7 +45,7 @@ export class ParticipantNameFormComponent implements OnInit {
});
// Set the username if authenticated as default value
const username = this.authService.getUsername();
const username = await this.authService.getUsername();
if (username) {
this.participantForm.get('name')?.setValue(username);
}

View File

@ -39,7 +39,10 @@ export class RoomCreatorComponent implements OnInit {
this.openviduLogoUrl = this.contextService.getOpenViduLogoUrl();
this.backgroundImageUrl = this.contextService.getBackgroundImageUrl();
this.username = this.authService.getUsername();
const username = await this.authService.getUsername();
if (username) {
this.username = username;
}
}
generateRoomName(event: any) {

View File

@ -10,7 +10,6 @@ import { UserRole, User } from '@lib/typings/ce';
})
export class AuthService {
protected hasCheckAuth = false;
protected isAuthenticated = false;
protected user: User | null = null;
constructor(
@ -21,7 +20,7 @@ export class AuthService {
async login(username: string, password: string) {
try {
await this.httpService.login({ username, password });
await this.getAuthenticatedUser();
await this.getAuthenticatedUser(true);
} catch (err) {
const error = err as HttpErrorResponse;
console.error(error.error.message || error.error);
@ -36,7 +35,6 @@ export class AuthService {
async logout(redirectTo?: string) {
try {
await this.httpService.logout();
this.isAuthenticated = false;
this.user = null;
if (redirectTo) {
@ -48,29 +46,30 @@ export class AuthService {
}
async isUserAuthenticated(): Promise<boolean> {
if (!this.hasCheckAuth) {
await this.getAuthenticatedUser();
await this.getAuthenticatedUser();
return !!this.user;
}
async getUsername(): Promise<string | undefined> {
await this.getAuthenticatedUser();
return this.user?.username;
}
async getUserRole(): Promise<UserRole | undefined> {
await this.getAuthenticatedUser();
return this.user?.role;
}
private async getAuthenticatedUser(force = false) {
if (force || (!this.user && !this.hasCheckAuth)) {
try {
const user = await this.httpService.getProfile();
this.user = user;
} catch (error) {
this.user = null;
}
this.hasCheckAuth = true;
}
return this.isAuthenticated;
}
getUsername(): string {
return this.user?.username || '';
}
isAdmin(): boolean {
return this.user?.role === UserRole.ADMIN;
}
private async getAuthenticatedUser() {
try {
const user = await this.httpService.getProfile();
this.user = user;
this.isAuthenticated = true;
} catch (error) {
this.user = null;
this.isAuthenticated = false;
}
}
}