如何使用角度访问保存在标头中的令牌

Question

我正在将使用 JWT 生成的“auth-token”发送到内置 angular 的前端。后端内置在 nodejs 中。当我尝试从前端访问 auth-token 变量时，它说语法错误。如何在我的 Angular 代码中访问此标头令牌？

组件中的前端请求

 onSubmit(){
    if(!this.signinForm.valid){
      return;
    }

    const userDetails: SigninAccount = {
      email: this.signinForm.controls.email.value,
      password: this.signinForm.controls.password.value
    }

    this.loginservice.loginUser(userDetails).subscribe(
      data => { console.log(data);
        this.router.navigate(['/'])
      },
      error => { console.log(error.error)}
    )
   

  }

前端服务和标头选项

  const loginhttpOptions = {
   headers: new HttpHeaders({
     'Content-Type': 'application/json',
   })
  } 

  loginUser(user: SigninAccount): Observable<SigninAccount> {
    const makeReqURL = `${this.apiURL}/login`;
    const loginUser = this.http.post<SignupAccount>(makeReqURL, user, httpOptions)
    return loginUser;
  }

后端响应

   const userToken = jwt.sign({ _id: user._id }, process.env.TOKEN);
    res.header('auth-token', userToken).send(userToken)

浏览器中图像的屏幕截图以及由于 console.log(data) 而给出的语法错误消息。

“文本”也有 JWT 令牌，与“身份验证令牌”相同，但不知道如何在代码中访问它，我也不知道什么是语法错误。

请帮忙。非常感谢您。

Answer 1

后端代码中一定存在一些语法问题，这就是您收到错误的原因。使用一些像 EsLint 这样的 linter 可以帮助检测错误。

如何获取 authToken？

这是您的新后端代码。

不要在标头中设置令牌，而是作为 json 发送。

   const userToken = jwt.sign({ _id: user._id }, process.env.TOKEN);
    res.json({token: userToken});

前端代码正确，您将在控制台中获得token。

this.loginservice.loginUser(userDetails).subscribe(
      data => { 
        console.log(data);
        const token = data.token;
        //Save to localStorage
        localStorage.setItem('token',token);
        this.router.navigate(['/']);
      },
      error => { console.log(error.error)}