angular-jwt令牌未在我的http请求标头中发送 [英] angular-jwt token does not get sent in my http request headers

问题描述

在我的角度应用程序中，我向后端服务器的端点/api/token发送一个http GET请求，如下所示，并接收该令牌.

In my angular application, I send an http GET request to an end-point /api/token of the back-end server as shown below and receive the token.

backend.service.ts

  authenticate(userName: String, passwd: String){

      this.myHttpclient.get(AppSettings.API_ENDPOINT + "token", {responseType: 'text'}).subscribe(res=>{
        this.isLoggedIn = true;
        this.receivedJWT = res;
        localStorage.setItem('access_token', res);
        console.log("Token saved = " + localStorage.getItem('access_token'));
        this.router.navigate(['home'])
      },
      errorResponse=>{
        console.log("token err= " + JSON.stringify(errorResponse));
        this.serverError = errorResponse["error"];
        setTimeout(() => {
          this.serverError = null;
        }, 3000);
        this.router.navigate([''])
      })
  }

登录时，我可以看到带有令牌的令牌已保存="日志.

I can see the "Token saved = " log with the token when I log-in.

在以下方法中，我将在登录后进行一次HTTP POST

In the following method I am making an http POST after login

backend.service.ts

createNewPage(title:string, content:string){
    this.myHttpclient.post('http://127.0.0.1:8080/api/pages',
      {
        name : title,
        markdown : content
      }
    ).subscribe(res=>{

      if (res['success'] === true)
      {
         this.saveResult = "Saved Successfully";
         this.router.navigate(['home']);  
      }
      else
      {
        this.saveResult = "Save Failed";
      }

    });

  }

我的 app.module.ts 具有以下导入内容，以支持angular-jwt

My app.module.ts has the imports as below to support the angular-jwt

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    MatInputModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: function  tokenGetter() {
          console.log("tokenGetter called = " + localStorage.getItem('access_token') )
          return     localStorage.getItem('access_token');
        },
        whitelistedDomains: ['http://127.0.0.1:8080'],
        blacklistedRoutes:['http://127.0.0.1:8080/api/token/']
      }
    })

  ]

尽管端点在白名单中，但我的POST并没有在标头中标记JWT令牌.

my POST does not stamp the JWT token in the header despite the end point is in the whitelist.

它给出以下错误

HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "Unauthorized", url: "http://127.0.0.1:8080/api/pages", ok: false, …}
error: "Unauthorized"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for http://127.0.0.1:8080/api/pages: 401 Unauthorized"
name: "HttpErrorResponse"
ok: false
status: 401
statusText: "Unauthorized"
url: "http://127.0.0.1:8080/api/pages"
__proto__: HttpResponseBase

并且请求标头包含以下字段，但不包含授权"

And the request Header contains the below fields but not the "Authorization"

Accept: application/json, text/plain, */*
Content-Type: application/json
Origin: http://localhost:4200
Referer: http://localhost:4200/createPage?title=title%201&new=true
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Mobile Safari/537.36

我不知道这里出了什么问题.甚至JWT都会按照日志进行接收和存储，据我所知，我已经完成了所有必要的工作，以使令牌被打包在请求中.但仍然没有.

I can't figure out what's wrong here. Even the JWT is received and stored as per the logs and I have done all the required as I understand to make the token get packed in the requests. but still id does not.

在这里我想念什么吗?请帮助

Is there anything I have missed here ? Please help

我正在使用的angular-jwt版本是@ auth0/angular-jwt @ 2.1.0

The angular-jwt version I am using is @auth0/angular-jwt@2.1.0

推荐答案

在白名单中添加没有http://或https://

add url in whitelist without http:// or https://

这篇关于angular-jwt令牌未在我的http请求标头中发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！