将标头令牌获取为未定义

Question

大家好，我目前正在使用 Angular 为前端和 Express、Typescript、JWT 和 Mongodb 为 API REST 编写简单的 singup 和 singin 代码。

当我在 Postman 上发送 post 方法时，它会给我带有令牌的标头，但是当我通过客户端发送 post 方法时，我得到带有未定义令牌的标头并且不知道为什么，你能帮帮我吗？

这是我的代码

Auth.service.ts

import { Component, OnInit } from '@angular/core';

import { AuthService } from '../../services/auth.service';


@Component({
  selector: 'app-registrar',
  templateUrl: './registrar.component.html',
  styleUrls: ['./registrar.component.css']
})
export class RegistrarComponent implements OnInit {


  user = {
    username: '',
    email: '',
    password: ''
  };

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
  }

  registrar(){
    this.authService.registrar(this.user)
      .subscribe(
        res => {
          console.log(res.token);
          // localStorage.setItem('token', res['token']);
        },
        err => console.log(err)
      );
  }

}

Registrar.component.ts

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

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

  private URL = 'http://localhost:3000/api/auth/';

  constructor(private http: HttpClient) { }

  registrar(user){
    return this.http.post<any>(this.URL + 'registrar', user);
  }

}

Auth.controller.ts -- API REST

import { Request, Response } from 'express';
import User, { IUser } from '../models/user';
import jwt from 'jsonwebtoken';

export const registrar = async (req: Request, res: Response) => {
   console.log(req.body);
   const user: IUser = new User ({
      username: req.body.username,
      email: req.body.email,
      password: req.body.password
   });
   user.password = await user.encriptarPassword(user.password);
   const usuarioGuardado = await user.save();

   const token: string = jwt.sign({_id: usuarioGuardado._id}, process.env.TOKEN_SECRET || 'secretKey');

   res.header('Token', token).json(usuarioGuardado);
};

export const logear = async (req: Request, res: Response) => {
   const user = await User.findOne({email: req.body.email});
   if (!user) return res.status(400).json('El email es incorrecto');

   const claveCorrecta: boolean = await user.validarPassword(req.body.password);
   if (!claveCorrecta) return res.status(400).json('La contraseña es incorrecta');

   const token: string = jwt.sign({_id: user._id}, process.env.TOKEN_SECRET || 'secretKey', {
      expiresIn: 60 * 60 * 24
   });

   res.header('token', token).json(user);
};

export const perfil = async (req: Request, res: Response) => {
   const user = await User.findById(req.userId, { password: 0 });
   if (!user) return res.status(404).json('Usuario no encontrado');
   res.json(user);
};

Here is a pic of console.log(res.token)

Answer 1

由于您将令牌作为标头发送，因此您需要在客户端读取标头。

修改您的服务registrar 方法以返回整个响应（即标头和正文）

return this.http.post<any>(this.URL + 'registrar', user, { observe: 'response'});

然后在你的组件中

this.authService.registrar(this.user)
  .subscribe(        resp => {
   let token = resp.headers.get('token');
   let user = resp.body
  });

为了快速修复，您也可以在正文服务器端添加令牌。