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) { }

MEAN堆栈错误。 “无法在将标头发送到客户端后设置标头”

1 个答案: