인터셉터 서비스가 http 호출에 권한 헤더를 추가하고 있지만 인터셉터 서비스에 전달한 실제 베어러 토큰 값을 포함하지 못합니다. 크롬 개발자 도구에 표시되는 무기명 토큰 값은 무기명 토큰 값이 아니라 '설정되지 않음'값입니다. 무기명 토큰 값이 로그인 구성 요소에서 콘솔에 기록 될 때 올바르게 표시되므로 설정되고 있음을 알 수 있습니다.하지만 후속 http에서 사용되기 전에 '설정되지 않은'값으로 다시 설정되는 것 같습니다. 요구?각도 5 HTTP 인터셉터가 작동하지 않습니다.
import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { HttpClient } from "@angular/common/http";
import { Response, Headers, RequestOptions } from "@angular/http";
import { AuthInterceptor } from "../../services/authInterceptor.service";
import { MatSnackBar } from '@angular/material';
import "rxjs/Rx";
@Component({
selector: 'login',
templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
memberLogin: any = {
'emailAddress': '',
'password': ''
};
public constructor(private http: HttpClient, private authInterceptor: AuthInterceptor, public snackBar: MatSnackBar, public router: Router) {
}
public ngOnInit() {
}
public login() {
let url: string = 'http://localhost:63741/api/Account/Login';
let body = { "Email": this.memberLogin.emailAddress, "Password": this.memberLogin.password };
this.http.post(url, body)
.subscribe(
data => {
this.authInterceptor.authToken = data.toString();
console.log('token data in login component : ' + this.authInterceptor.authToken);
this.snackBar.open('welcome back, you are now logged in', 'ok', { duration: 2200 })
},
err => {
});
return;
};
}
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthInterceptor {
authToken: string = 'not set';
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const authReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + this.authToken) });
return next.handle(authReq);
}
}
그 의미가 있습니다, 톰 감사합니다. 나는 당신이 제안하고있는 변화를 만들 것이다. –