http.post () не отправляет запрос и выдает ошибку: «Указан неверный токен» - PullRequest
Новая
       4

http.post () не отправляет запрос и выдает ошибку: «Указан неверный токен»

2 голосов
/ 29 апреля 2019

Я новичок в Angular CLI и хочу написать компонент входа в Angular, но когда я делаю почтовый запрос, angular http не отправляет запрос на сервер, и в качестве вывода я получил это сообщение об ошибке в консоли илюбой запрос не был отправлен на сервер: 

InvalidTokenError {message: "Invalid token specified"}
InvalidTokenError
    at Object../node_modules/jwt-decode/lib/index.js (http://localhost:26000/vendor.js:497368:31)
    at __webpack_require__ (http://localhost:26000/runtime.js:77:30)
    at Object../src/app/authentication/auth.service.ts (http://localhost:26000/main.js:584:68)
    at __webpack_require__ (http://localhost:26000/runtime.js:77:30)
    at Object../src/app/authentication/auth-guard.service.ts (http://localhost:26000/main.js:400:71)
    at __webpack_require__ (http://localhost:26000/runtime.js:77:30)
    at Object../src/app/modules/hub-administration-tool/hub-administration-tool.routing.module.ts (http://localhost:26000/main.js:12909:92)
    at __webpack_require__ (http://localhost:26000/runtime.js:77:30)
    at Object../src/app/modules/hub-administration-tool/hub-administration-tool.module.ts (http://localhost:26000/main.js:12697:98)
    at __webpack_require__ (http://localhost:26000/runtime.js:77:30)

вот компонент аутентификации: 


import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { JwtHelperService } from '@auth0/angular-jwt';
import { map} from 'rxjs/operators';

import decode from 'jwt-decode';




interface TokenResponse {
  access_token: string
}

export interface TokenPayload {
  username: string
  password: string
}

@Injectable()
export class AuthService {
  constructor(public jwtHelper: JwtHelperService,
    private http: HttpClient) { }


  public login (user: TokenPayload) {

    const base = this.http.post<any>(`//localhost:25000/auth/login`, {   username: user.username,    password: user.password  },{ headers: new HttpHeaders().set('Content-Type', 'application/json') })
    const request = base.pipe(
        map((data : TokenResponse) => {
            console.log({data});
             if (data.access_token) {
                console.log(data.access_token)
             }
            return data
        })
    )
    return request
}

}

, а вот компонент входа: 

import { Component, OnInit, Input, TemplateRef, ContentChild } from '@angular/core';
import { AuthService, TokenPayload } from '../authentication/auth.service';
import { FormBuilder, FormGroup, Validators  } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { HttpClient,HttpRequest } from '@angular/common/http'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  credentials: TokenPayload = {
    username: '',
    password: ''
}

  loginForm: FormGroup;
  loading = false;
  submitted = false;
  returnUrl: string;

  @ContentChild(TemplateRef)
  @Input() layoutTemplate: TemplateRef<any>;
  constructor(private authService: AuthService,
              private formBuilder: FormBuilder,
              private router: Router,
              private route: ActivatedRoute,
              private http : HttpClient
              ) { }

  ngOnInit() {



  }


  login() {
    this.authService.login(this.credentials).subscribe( //get username and password from Html file
      () => {
          console.log("DONE" );
      },
      err => {
          console.error(err)
      }
  )


}

}

пакетов.Json 

{
  "name": "administration-hub",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 26000 --poll=2000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@auth0/angular-jwt": "^2.0.0",
    "@progress/kendo-angular-buttons": "^4.0.0",
    "@progress/kendo-angular-charts": "3.3.0",
    "@progress/kendo-angular-dateinputs": "2 - 3",
    "@progress/kendo-angular-dropdowns": "2 - 3",
    "@progress/kendo-angular-excel-export": "1 - 2",
    "@progress/kendo-angular-grid": "^3.5.0",
    "@progress/kendo-angular-inputs": "2 - 3",
    "@progress/kendo-angular-intl": "^1.4.0",
    "@progress/kendo-angular-l10n": "^1.1.0",
    "@progress/kendo-angular-popup": "^2.0.0",
    "@progress/kendo-angular-upload": "^4.1.3",
    "@progress/kendo-data-query": "^1.0.0",
    "@progress/kendo-drawing": "^1.2.0",
    "@progress/kendo-theme-default": "latest",
    "@progress/kendo-ui": "^2018.2.704",
    "@types/cross-storage": "^0.8.29",
    "@types/jspdf": "^1.1.31",
    "core-js": "^2.5.4",
    "cross-storage": "^1.0.0",
    "hammerjs": "^2.0.0",
    "jspdf": "^1.4.1",
    "jwt-decode": "^2.2.0",
    "ngx-bootstrap": "^3.0.1",
    "ngx-color-picker": "^6.5.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/core-js": "^2.5.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

Как мне решить проблему?

1 Ответ

0 голосов
/ 29 апреля 2019

когда вы получаете результат в вашем сервисе, который приходит с сервера и несет токен, это объект. Итак, вы должны зайти внутрь объекта и извлечь токен. в вашем коде токен не определен, поэтому вы получите ошибку. в вашем компоненте: 

     const base = this.http.post<any>(`//localhost:25000/auth/login`, {   username: 
       user.username,    password: user.password  },{ headers: new 
      HttpHeaders().set('Content-Type', 'application/json') })
           const request = base.pipe(
         map((data : TokenResponse) => {
           console.log({data});    // is the respond object

           console.log(data['_body'].token) //// your token is here

          return data
              })
                )
            return request
            }

Я надеюсь, что это работает

...