将标头令牌获取为未定义

Posted 2023-03-10

【中文标题】将标头令牌获取为未定义

【英文标题】：Getting header Token as Undefined

【发布时间】：2020-08-10 15:20:36

【问题描述】：

大家好，我目前正在使用 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)

【问题讨论】：

最简单的解决方案是在用户对象服务器端添加令牌。否则，您需要修改您的角度调用以读取响应标头

你怎么能改变我的角度调用来读取响应头？我将尝试将令牌添加到我的用户对象服务器端，但我该如何在我的角度解决这个问题？

嗨，看看这个帖子：***.com/questions/48184107/…

【参考方案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
  );

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

【讨论】：

现在我将 null 作为一个值。获得令牌的最佳方法是什么？作为标头还是在服务器端？在我的服务器端，我只需要向用户添加令牌，对吗？我对这件事很陌生，抱歉

在 chrome 网络调试器中显示响应标头的屏幕截图。最简单的方法是将它添加到用户对象服务器端，然后像以前一样检索它。

试试.get('Token')（大写T）。如果它们不起作用，请检查控制台中是否有任何错误

仍然为 null prntscr.com/s6z7r1 你能告诉我如何将令牌添加到我的对象吗？

usuarioGuardado.token = token?