2017-10-30 3 views
1

저는이 문제에 각도 JWT 토큰을 사용합니다.이 문제는 Postman의 API에서 작동하지만 각도 통화에서는 작동하지 않습니다. 다음과 같이 세부 정보 요청 : screen shot각도 jwt 토큰이 유효하지 않습니다.

응답에 표시된 토큰을 복사하고 작동하는 우편함을 통해 요청을 생성합니다.

각도 서비스에서 보낼 때이 토큰이 유효하지 않은 이유는 무엇입니까? 아래

이죠 결과 : 여기

enter image description here

토큰 각도면을 생성하는 코드>

import { Injectable } from '@angular/core'; 

    import { 
     HttpRequest, 
     HttpHandler, 
     HttpEvent, 
     HttpInterceptor} from '@angular/common/http'; 
    //import { AuthService } from './auth/auth.service'; 
    import { Observable } from 'rxjs/Observable'; 
    import { Http } from "@angular/http/http"; 
    import { AuthService } from "./auth.service"; 
    import { HttpClient } from "@angular/common/http"; 
    @Injectable() 
    export class TokenInterceptor implements HttpInterceptor { 
     constructor(public auth: AuthService) { } 
     intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

     request = request.clone({ 
      setHeaders: { 
      Authorization: `Bearer ${this.auth.getToken()}` 
      } 
     }); 
     return next.handle(request); 
     } 
    } 

    public getToken(): string { 
    return localStorage.getItem('token'); 
    } 

답변

5

Authorization 헤더이 형식에서 통상 :

Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ 

전체를 보내려는 것처럼 보입니다. 목적. 대신 토큰 필드 만 보내십시오.

+0

이는 의미가 있습니다. 위의 코드를 기반으로이 작업을 수행하는 방법에 대한 아이디어가 있습니까? –

+0

아마도 getToken의 반환 값을'return localStorage.getItem ('token'). token;'으로 변경하면 내 의견으로는 반창고가 될 것입니다. 개발자 도구 (응용 프로그램 아래)를 사용하여 로컬 저장소의 내용을 확인할 수 있습니다. key : token의 내용이 전체 객체가 아닌 eyJh ... 유형의 문자열인지 확인하십시오. 토큰을 백엔드에서받을 때 토큰을 로컬 저장소에 잘못 저장할 수 있습니다. – MikaS

+0

로컬 저장소의 값이 문자열 인 경우 .token을 추가하는 것이 도움이된다고 생각하지 않습니다. 로컬 스토리지에서 토큰 키의 토큰 필드에 액세스하는 것은 실제 객체 인 경우에만 작동합니다. – MikaS