Angular2フレームワークがJWTトークンを取得する

Question

私はJWTを返すSpringBootバックエンドJavaアプリケーションを持っています。ここに私のコードは、それが私のangular2コードでそのトークン保存する方法この

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJkZWR5cHVqaSIsInJvbGVzIjoiYWRtaW5pc3RyYXRvciIsImlhdCI6MTQ5NzA3NDQ3OX0.i7CjOhNScJRZc5dKhGaNFwje_5-PcOWDwlHD68fmOrw

のようなテキストを返すと、ユーザー名を取得

@RequestMapping(value = "/admin/login", method = RequestMethod.POST) 
     public String login(@RequestBody Customer login) throws ServletException { 

      String jwtToken = ""; 

      if (login.getUsername()== null || login.getPassword()== null) { 
       throw new ServletException("Please fill in username and password"); 
      } 

      String username = login.getUsername(); 
      String password = login.getPassword(); 

      Customer customer = customerservice.findByusername(username); 

      if (customer == null) { 
       throw new ServletException("Username not found."); 
      } 

      String pwd = customer.getPassword(); 

      if (!password.equals(pwd)) { 
       throw new ServletException("Invalid login. Please check your name and password."); 
      } 

      jwtToken = Jwts.builder().setSubject(username).claim("roles", "administrator").setIssuedAt(new Date()) 
        .signWith(SignatureAlgorithm.HS256, "ZGVkeXB1amk=").compact(); 

      return jwtToken; 
     } 

ある

ここまで私のangular2コードです

サービス

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/throw'; 

import {CustomerData} from '../model/customer'; 
import {Auth} from '../model/auth'; 

@Injectable() 
export class CustomerService { 

    private headers = new Headers({'Content-Type': 'application/json'}); 
    constructor(private http: Http) { } 

    registerCustomer(registerdata:CustomerData){ 
    return this.http.post("http://localhost:8080/customer/new", JSON.stringify(registerdata), {headers: this.headers}) 
    .map((res: Response) => res.json()) 
    .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
    } 

    login(auth:Auth){ 

    return this.http.post("http://localhost:8080/admin/login", JSON.stringify(auth), {headers: this.headers}) 
    .map((response: Response) => { 
       // login successful if there's a jwt token in the response 
       let token = response.json() && response.json().token; 
       if (token) { 
        // store username and jwt token in local storage to keep user logged in between page refreshes 
        localStorage.setItem('currentUser', JSON.stringify({ username: auth.username, token: token })); 

        // return true to indicate successful login 
        return true; 
       } else { 
        // return false to indicate failed login 
        return false; 
       } 
      }).catch((error:any) => Observable.throw(error.json().error || 'Server error')); 

    } 


    } 

クラスモデルのAuth

export class Auth { 
    public username:string; 
    public password:string; 
} 

とログイン

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import {CustomerService} from '../services/customer.service'; 
import {Auth} from '../model/auth'; 




@Component({ 
    selector: 'app-app-login-admin', 
    templateUrl: './app-login-admin.component.html', 
    styleUrls: ['./app-login-admin.component.css'], 
    providers:[CustomerService] 

}) 
export class AppLoginAdminComponent implements OnInit { 

    auth: Auth = new Auth(); 
    login_admin: FormGroup; 
    private tmpresult: String = ''; 
    err: string; 

    constructor(
    private fb: FormBuilder, 
    private service: CustomerService, 

    ) {} 

    ngOnInit() { 
     this.login_admin = this.fb.group({ 
     username: ['', [Validators.required, Validators.minLength(2)]], 
     password: ['', [Validators.required, Validators.minLength(2)]], 
    }); 
    } 

    onSubmit() { 
    this.service.login(this.login_admin.value) 
    } 

} 

のコンポーネント私は、コードを実行した場合。それは何も返しません。 IDKはどこですか？ Google Chromeのデベロッパーツールをチェックしてローカルストレージを確認しますが、そこには何もトークンがありませんでした。助けてください。ありがとう:)

Answer 1

いくつかのエラーがあります。

1. login（）メソッドから返されたオブザーバブルを購読していることがないため、実際にはPOSTリクエストを送信しません。
2. サービスでは、tokenというプロパティを含むJSONオブジェクトが必要です。しかし、あなたのスプリングコントローラはJSONを返しません。 Stringを返します。
3. JSON.stringify（）を呼び出したり、HTTPサービスでContent-Typeヘッダーを渡す必要はありません。送信するオブジェクトとサービスを文字列化して渡し、適切なコンテンツタイプを設定するだけです。あなたが言及