Angular, erro 403, problema de atutenticação ao realizar consultas

Front-end
#1

bom dia! pessoal, preciso de ajuda, tenho um projeto angular, estou tentanto implementar a autenticação e login, ja consigo obter um token jwt da minha API e consigo logar com sucesso, no entanto quando tento realizar as consultas no meu sistema, nao tenho autoriazação da API pra realizar essas consultas, pelo quen to entendendo, de alguma forma eu preciso enviar o token que recebi no cabeçalho (header) pra conseguir realizar consultas dentro do sistema, mas nao to conseguindo fazer isso

link para download do projeto:

https://drive.google.com/drive/folders/1UqGqxN2FWJX5Lc8HVX_7TZH2SxVGdQoz?usp=sharing

segue a baixo meu controller de login

import { throwError } from ‘rxjs’;
import { Component } from ‘@angular/core’;
import { LayoutService } from ‘src/app/layout/service/app.layout.service’;
import { Router } from ‘@angular/router’;
import { AuthService } from ‘src/app/shared/services/auth.service’;
import { MessageService } from ‘primeng/api’;

@Component({
selector: ‘app-login’,
templateUrl: ‘./login.component.html’,
styles: [ :host ::ng-deep .pi-eye, :host ::ng-deep .pi-eye-slash { transform:scale(1.6); margin-right: 1rem; color: var(--primary-color) !important; } ],
providers: [MessageService]
})
export class LoginComponent {

valCheck: string[] = ['remember'];

userLogin = {
    email: '',
    password: ''
}

constructor(
    private router: Router,
    private authService: AuthService,
    private messageService: MessageService
) {

    // if (this.authService.isUserLoggedIn()) {
    //     this.router.navigate(['/home']);
    // }

}

validationForm() {
    if (!this.userLogin.email)
        throw new Error('O campo email é obrigatório!');
    if (!this.userLogin.password)
        throw new Error('O campo senha é obrigatório!');
}


private showToast(severity: string, detail: any) {
    this.messageService.clear();
    this.messageService.add({ severity: severity, detail: detail, life: 3000 });
}

async login() {
    try {
        this.validationForm();

        const result = await this.authService.login(this.userLogin);

        if (result)
            this.router.navigate(['/home']);


    } catch (error) {
        this.showToast('warn', error);

    }
}

}

#2

AuthGuard:

import { Injectable } from ‘@angular/core’;
import { Router, CanLoad, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from ‘@angular/router’;
import { Observable } from ‘rxjs’;
import { AuthService } from ‘…/services/auth.service’;

@Injectable({
providedIn: ‘root’
})
export class AuthGuard implements CanActivate {

constructor(private router: Router) { }

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const token = window.localStorage.getItem('token');
    debugger;
    if(token){
        return true;
    }else{
        this.router.navigate(['']);
        return false;
    }
}

}

Screenshot_1
Screenshot_11904×883 122 KB

#3

Além do interceptor das rotas, vc deve ter um que inclui o token nas requisições feitas ao servidor, ou seja, monta o token no header Authorization.

1 curtida