如何通过 AngularJS 传递 JsonWebToken(JWT)

Posted 2023-02-24

【中文标题】如何通过 AngularJS 传递 JsonWebToken(JWT)

【英文标题】：How to pass JsonWebToken(JWT) through AngularJS

【发布时间】：2019-04-23 11:58:07

【问题描述】：

我使用 JWT 作为身份验证方法创建了一个 Django RESTful API，但无法使用 angularJS 将令牌作为标头传递。

我认为我的 API 没有错误，因为我使用了通过此脚本获取的令牌并在 Postman 中对其进行了测试：

我的 JWT 令牌认证脚本在这里：

 // Uses http.get() to load data from a single API endpoint
  list() 
    return this.http.get('api/', this.getHttpOptions());
  

// helper function to build the HTTP headers
  getHttpOptions() 
    return 
      headers: new HttpHeaders(
        'Content-Type': 'application/json',
        'Authorization': 'JWT ' + this._userService.token
      )
    ;
  

我在这里尝试使用http.get()。提前致谢！

错误会是这样的：

401 (Unauthorized)

【问题讨论】：

您是否看到网络请求中的标头 api/ ？

我在使用 Django REST 框架 Token 和 Ionic3 时遇到了同样的问题。标头似乎是在请求中设置的，Access-Control-Request-Headers authorization,content-type。当我在 Firefox 中手动重新发送带有标头的请求时，Authorization: Token xxxmyaccesstokenxxx 它成功了，这让我相信 Ionic/Angular 没有以 Django 可以访问的方式设置令牌。跨度>

嗨@J.ward 谢谢你的提醒，我已经按照***.com/questions/35760943/… 这个教程设置了我的后端，对于前端，我设置了Access-Control-Request-Headers，但它仍然不起作用。不知道是哪部分出错了，如果API可以被Postman访问，是不是说明我的API是正确的？

嗨@hsbzzhz，我刚刚发现今天出了什么问题。 Django 按顺序加载其中间件，并且 CORS 中间件必须靠近顶部才能在整个应用程序中正确应用。我花了太长时间才弄清楚这一点。我已经在我的应用程序中设置了 CORS_ORIGIN_ALLOW_ALL = True 所以这对我来说不是这样，但是如果一些可怜的灵魂曾经阅读过希望它可以为他们节省几天的头发拉扯。

【参考方案1】：

谢谢各位， 我发现问题是关于 CORS，我的解决方案在这里，有两种方法可以解决这个问题，一种是在您的 http 请求中添加 'Access-Control-Allow-Origin': '*'，有时您需要添加更多。另一个答案是在后端添加 CORS_ORIGIN_WHITELIST = 'localhost:4200'。 https://www.youtube.com/watch?v=OIbndrrUYiY

【参考方案2】：

Cakephp3 的 JWT 也有同样的问题，请关注标题，希望对您有所帮助。

this.http.get('api/',  headers: new HttpHeaders(
    'Content-Type': 'application/json',
    'Authorization': 'JWT ' + this._userService.token,
    'Authenticationtoken': 'JWT ' + this._userService.token
) );

【参考方案3】：

试试这个：

list() 
return this.http.get('api/',  this.getHttpOptions() );  


getHttpOptions() 
  const headers = new HttpHeaders(
    'Content-Type': 'application/json',
    'Authorization': 'JWT ' + this._userService.token
  ); 
   return headers;

【讨论】：

谢谢，我是这样试的：return this.http.get(api/', headers : this.getHttpOptions() );，还是不行，同样的错误码401.我怀疑我登录成功后页面没有刷新

抱歉没用。这几乎就是我使用的代码，它对我来说很好用。奇怪