0

Tengo una api en laravel y estoy usando angular. Entonces tengo este servicio en angular que no es mas que un request para eliminar registros :

private getAuthHeaders(): HttpHeaders {
    const token = localStorage.getItem('token');
    return new HttpHeaders().set('Authorization', `Bearer ${token}`);
  }
  deleteUser(id: number): Observable<ApiResponse<User>> {
    return this.httpClient
      .delete<ApiResponse<User>>(`${this.apiUrl}/api/v1/users/${id}`, {
        headers: this.getAuthHeaders(),
      })
      .pipe(
        catchError((error: HttpErrorResponse) => {
          const errorMsg =
            this.errorHandlingService.extractErrorMessage(error) ||
            'Error al eliminar el usuario.';
          return throwError(() => new Error(errorMsg));
        })
      );
  }

Mientras que asi se hace login y se captura el token junto con otros datos

login(username: string, password: string): Observable<any> {
    return this.http
      .post(`${this.apiUrl}/api/v1/login`, {
        username,
        password,
      })
      .pipe(
        tap((response: any) => {
          sessionStorage.setItem('token', response.token);
          this.isAuthenticatedSubject.next(true);
          this.fetchUser();
        }),
        catchError((error) => {
          console.error('Error en el inicio de sesión', error.error);
          return of(error.error);
        })
      );
  }

  private fetchUser(): void {
    const token = sessionStorage.getItem('token');
    if (token) {
      this.http
        .get(`${this.apiUrl}/api/user`, {
          headers: { Authorization: `Bearer ${token}` },
        })
        .subscribe({
          next: (user: any) => {
            console.log(user);
            this.userSubject.next(user);
            sessionStorage.setItem('user_id', user.id);
            sessionStorage.setItem('username', user.username);
            const firstRole = user.roles[0];
            sessionStorage.setItem('role', firstRole.name);
          },
          error: (error) => {
            console.error('Error fetching user data', error);
          },
        });
    }
  }

Dado que solo uso sanctum como se puede ver si estoy enviando el token de autorización en la petición. Ahora se supone que solo el administrador puede borrar los registros asi lo especifique en las rutas de laravel:

Route::middleware('auth:sanctum')->group(function () {
        Route::group(['middleware' => ['role:Administrador']], function () {
            Route::apiResource('/users', UsersController::class)->names('users');
        });
    });

Aqui el problema es que hago el request con un usuario que no es administrador y aun asi se procesa exitosamente el request. Sin embargo eh probado en postman y ahi si me esta dando la excepcion con el estado de codigo 403. Que es lo que tambien esperaria que pase en angular entonces por mas que le doy vueltas al asunto no entiendo que estoy haciendo mal. Ya que al probar en postman si ejecuta la restriccion de spatie pero en angular no lo que provoca que cualquier usuario que inicie sesion pueda borrar los registros o acceder a cualquier otro recurso que se supone seria accesible solo para el administrador.

2
  • Fijate que al loguearte seteas el token en sessionStorage y al obtenerlo para borrar this.getAuthHeaders() lo hace con localStorage por alli no ira el asunto? Commented el 24 oct. a las 13:29
  • si era por ahi el asunto vi que me equivoque poniendo localStorage cuando en realidad era sessionStorage y con eso pude solucionarlo Commented el 24 oct. a las 17:25

1 respuesta 1

-1

El problema que estás enfrentando es que en Postman la restricción de roles de Spatie está funcionando correctamente (retornando el error 403 para usuarios no autorizados), pero en Angular no se está respetando esta restricción y el request se procesa exitosamente, incluso para usuarios no administradores.

Aquí te dejo algunas posibles soluciones y explicaciones para resolver este problema:

  1. Verificar el token en el localStorage En el código de Angular que proporcionas, estás utilizando el token almacenado en localStorage o sessionStorage para hacer las peticiones. Asegúrate de que el token utilizado en Angular sea el correcto y el mismo que el utilizado en Postman. Si en Angular se usa el token de un usuario administrador, es posible que ese sea el motivo por el cual se permite eliminar registros.

Solución: Revisa si el token almacenado en sessionStorage o localStorage pertenece realmente a un usuario no autorizado cuando realizas la operación de eliminación.

Posible solucion

private getAuthHeaders(): HttpHeaders { const token = localStorage.getItem('token'); // Asegúrate de que el token sea correcto return new HttpHeaders().set('Authorization', Bearer ${token}); }

3
  • 2. Manejo correcto del estado de la respuesta Es importante que en Angular manejes las respuestas HTTP adecuadamente y captures correctamente los códigos de error, en este caso, el 403 Forbidden. Modificación del servicio deleteUser: Asegúrate de que Angular capture correctamente el código de estado HTTP 403 para manejar el error de permisos cuando el usuario no tenga el rol de administrador. Commented el 22 oct. a las 21:21
  • puedes editar la pregunta, y agregar este comentario a la misma, para que no quede acá abajo.
    – Excorpion
    Commented el 22 oct. a las 22:49
  • Esa respuesta parece generada con chat gpt o una de esas. Igual gracias por comentar Commented el 23 oct. a las 1:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.