平均堆栈误差。 "Cannot set headers after they are sent to the client"

Question

我有一个 MEAN 堆栈应用程序，我正在尝试排除故障。我已经隔离了问题，但我不确定如何解决它，这里是代码。我认为错误所在的位置是这样标记的。

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-success',
templateUrl: './success.component.html',
styleUrls: ['./success.component.css']
})
export class SuccessComponent implements OnInit {
user:Object;
constructor(
private authService:AuthService,
private router:Router) { }
ngOnInit() {
this.authService.getProfile().subscribe(profile => { //THIS CALL TO GET PROFILE CAUSES THE ERROR
console.log("GOT HERE (IN SUCCESS)");
this.user = profile.user;
},
err => {
console.log("ERROR" + err);
return false;
});
}
onLogoutClick(){
this.authService.logout();
this.router.navigate(['/']);
return false;
}
}

在这里使用 get Profile(( 方法

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import "rxjs/add/operator/map";
import { tokenNotExpired } from 'angular2-jwt';
@Injectable()
export class AuthService {
authToken: any;
user: any;
constructor(private http:Http) { }
registerUser(user) {
let headers = new Headers();
headers.append('Content-Type','application/json');
return this.http.post('http://localhost:3000/users/register', user, {headers: headers}).map(res => res.json());
}
authenticateUser(user) {
let headers = new Headers();
headers.append('Content-Type','application/json');
return this.http.post('http://localhost:3000/users/authenticate', user, {headers: headers}).map(res => res.json());
}
getProfile() {
let headers = new Headers();
this.loadToken();
headers.append('Authorization', this.authToken);
headers.append('Content-Type','application/json');
console.log("GOT HERE (IN getProfile)");
return this.http.get('http://localhost:3000/users/success', {headers: headers}).map(res => res.json()); //PROBLEM IS HERE
}
loadToken() {
const token = localStorage.getItem('id_token');
this.authToken = token;
}
loggedIn() {
return tokenNotExpired('id_token');
}
storeUserData(token, user) {
localStorage.setItem('id_token', token);
localStorage.setItem('user', JSON.stringify(user));
this.authToken = token;
this.user = user;
console.log("GOT HERE...");
}
logout() {
this.authToken = null;
this.user = null;
localStorage.clear();
}
}

任何帮助将不胜感激。我看过类似的帖子，但在这种情况下它们对我没有帮助。

也是路线

router.get('/success', passport.authenticate('jwt', {session:false}), (req, res, next) => {
const user = req.user;
console.log("GOT HERE (IN the route file)");
return res.json({user: user});
//return res.json({success: true, msg: 'user is found'});
});

Answer 1

您几乎做对了所有事情，但您不必从角度服务中设置内容类型。Angular会自动为您完成这项工作。

如果您尝试使用 api 请求发送身份验证令牌，请尝试以下模式。

与其调用函数来加载令牌，不如尝试直接从函数调用 localstorage。

例

getProfile() {
const headers = new Headers()
.set('Authorization', localStorage.getItem('id_token'));
console.log("GOT HERE (IN getProfile)");
return this.http.get('http://localhost:3000/users/success', {headers: headers}).map(res => res.json()); //PROBLEM IS HERE
}

或者，如果需要，可以在服务文件中初始化变量，并仅从本地存储中获取该值一次。

token = localStorage.getItem('id_token');

更新我的答案，以便您可以使用角度提供的新 HttpClient。

导入新的 HttpClient 模块，然后在构造函数中创建对象

import { HttpClient, HttpHeaders} from '@angular/common/http';
constructor(private http: HttpClient) { }