Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Header não estão sendo modificados pelo intercptor

photo.service.ts

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Photo } from "./photo";

const API = 'http://localhost:3000';

@Injectable({ providedIn: 'root' })
export class PhotoService {

    constructor(private http: HttpClient) {}

    listFromUser(userName: string) {
        return this.http
            .get<Photo[]>(API + '/' + userName + '/photos');       
    }

    listFromUserPaginated(userName: string, page: number) {
        const params = new HttpParams()
            .append('page', page.toString());

        return this.http
            .get<Photo[]>(API + '/' + userName + '/photos', { params });       
    }

    upload(description: string, allowComments: boolean, file: File) { 

        const formData = new FormData();
        formData.append('description', description);
        formData.append('allowComments', allowComments ? 'true' : 'false');
        formData.append('imageFile', file)

        return this.http.post(
            API + '/photos/upload', formData
        );
    }
}

photo-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { PhotoService } from '../photo/photo.service';
import { Router } from '@angular/router';

@Component({
  selector: 'ap-photo-form',
  templateUrl: './photo-form.component.html',
  styleUrls: ['./photo-form.component.css']
})
export class PhotoFormComponent implements OnInit {

  photoForm: FormGroup;
  file: File;

  constructor(
    private formBuilder: FormBuilder,
    private photoService: PhotoService,
    private router: Router) { }

  ngOnInit() {

      this.photoForm = this.formBuilder.group({

          file: [
              '',
              Validators.required
          ],
          description: [
              '',
              Validators.maxLength(300)
          ],
          allowComments: [
              true
          ]
      })
  }

  upload() {

    const description = this.photoForm.get("description").value;
    const allowComments = this.photoForm.get("allowComments").value;

    this.photoService
      .upload(description, allowComments, this.file)
      .subscribe(() => this.router.navigate(['']))
  }
}

Estou recebendo o erro :

Failed to load resource: the server responded with a status of 401 (Unauthorized)

5 respostas

Fala aí Sergio, tudo bem? Acho que faltou postar o código do interceptor, ficaria mais fácil tentar lhe ajudar.

Fico no aguardo.

Segue: core/auth/request.interceptor.ts

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { TokenService } from '../token/token.service';

@Injectable()
export class RequestInterceptor implements HttpInterceptor {

    constructor(private tokenService: TokenService) { }

    intercept(
        req: HttpRequest<any>, 
        next: HttpHandler
    ): Observable<HttpEvent<any>> {

        if(this.tokenService.hasToken()) {

            const token = this.tokenService.getToken();
            req = req.clone({
                setHeaders: {
                    'x-acess-token': token
                }
            })
        }
        return next.handle(req)
    }
}

Ele funcionou para os processos da aula anterior.......

Você verificou se está entrando no if? O código parece estar correto.

Verifica na request do browser o que foi enviado como cabeçalho.

O que você pode tentar fazer (e eu aconselho) é criar uma nova variável em vez de mudar o parâmetro:

export class RequestInterceptor implements HttpInterceptor {

    constructor(private tokenService: TokenService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if(this.tokenService.hasToken()) {

            const token = this.tokenService.getToken();
            const newReq = req.clone({
                setHeaders: {
                    'x-acess-token': token
                }        
            })
        }
        return next.handle(newReq)
    }
}

Espero ter ajudado.

solução!

Fala Matheus... Encontrei o erro. O problema era um pouco mais simples:

ERRADO: x-acess-token;

CORRETO: x-access-token.

Mas valeu aí

Puts, nem reparei kkk, falha minha.

Fico feliz que tenha conseguido resolver, vou finalizar o tópico.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software