Express 服务器无法接收 Angular HttpClient 发送的身份验证标头

Posted 2023-03-10

【中文标题】Express 服务器无法接收 Angular HttpClient 发送的身份验证标头

【英文标题】：Express server can't recieve auth headers sent by angular HttpClient

【发布时间】：2019-10-20 01:32:42

【问题描述】：

我正在创建一个用户可以登录并查看其个人资料的应用。为此，我在服务器上有 enpdpoint：

router.get('/profile',
passport.authenticate('jwt', session:false),
async(req, res) => 
    console.log(req.headers)
    try 
        let users = await usersDB.getAll();
        res.json(
            users: users,
            user: req.user
        );
     catch (err) 
        console.log(err);

       
);

如果标头中有身份验证令牌，passport.authenticate('jwt', session:false) 行应该对用户进行身份验证。 但就我尝试记录标题而言 - 他们没有这样的字段。 等等登录按钮提交我做以下：

 public onLoginSubmit(): void 
    const user = 
      email : this.email,
      password : this.password
    
    this.authService.authenticateUser(user).subscribe((data: any)=>
      if(data.success)//here need to check response for success
        this.authService.storeUserData(data);
        this.router.navigate(['/user']);
      else
        this.router.navigate(['/login']);
      
    );
 

然后看看getProfile()：

    getProfile()
      let headers = new HttpHeaders();
      this.loadToken();
      headers.set('Content-Type', 'application/x-www-form-urlencoded').set('Authorization', this.authToken);
      return this.http.get(`$this.urlprofile/`, headers:headers)
      .pipe(map(res => res))
    

好吧，发送请求时，我收到了401 Unauthorized 但是使用邮递员，一切都很好。这是邮递员的代码：

GET /profile HTTP/1.1
Host: localhost:3000
: 
Content-Type: application/x-www-form-urlencoded
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7Il9pZCI6IjVjZjU4NThiODhiZGRmM2M5ODYxYjU2ZCIsImZpbyI6IlRlbGVmdXMgSWxsaWEgQW5hdG9saXlvdmljaCIsInBhc3N3b3JkIjoiN2IzNGMxNzFmZmM2MWE2ZDYyZDljZTM5NDg0ZjM1NjNjMDY3Y2Q3ZTlhMDQ5ZjZkY2RjN2U5NzI2NWJjNTAwMWE2NjE5OTkxZjFjN2U3MTVjZjZkMDUzZThhZDNlMmQyZWIxNzQ1ZDI4NmRkMWJlOTVkNTdjNjg5MzA3OTI1YjMiLCJlbWFpbCI6ImlseWEuaXQzMzdAZ21haWwuY29tIiwiYXZhdGFyIjoiaHR0cHM6Ly9iaXQubHkvMklrMkc3ViIsImJpcnRoIjoiMTk3MC0wMS0xMVQwMDoyMjo1MC4wMDFaIiwibGljTnVtYmVyIjoiQUEyMzQyNTQyNjMiLCJzdGF0dXMiOiJ1c2VyIiwiX192IjowLCJhcHBsaWNhdGlvbnMiOltdLCJwZW5kaW5nIjp0cnVlfSwiaWF0IjoxNTU5NjQyNjI0LCJleHAiOjE1NjAyNDc0MjR9.iDt1lE5CziA05Wd2s1y536S0LyahGCRmwe6WsgYytzQ
cache-control: no-cache
Postman-Token: 5c4e2375-d8d0-43a0-87f8-25cd9a85c92f

【问题讨论】：

检查网络/选项卡和日志是否有错误，并检查发送/接收的数据。也许你也有一些 cors 问题？

@David，我已经这样做了两次。问题是我在请求标头中看不到令牌

我在您的代码中看不到您将令牌添加到 API 请求的位置

@David，对不起，更新了帖子（粘贴正确的方法）

嗯，正如下面的答案所示，这是因为HttpHeaders 是不可变的。

【参考方案1】：

HttpHeaders 是不可变的，所以试试吧（我猜你不需要设置 application/x-www-form-urlencoded）

     getProfile()
      let headers = new HttpHeaders(
'Authorization' : this.authToken
);
      this.loadToken();
      return this.http.get(`$this.urlprofile/`, headers:headers)
      .pipe(map(res => res))
    

如果您的身份验证是 Bearer，您将需要 'Authorization': 'Bearer '+'this.authToken'