Angular2 框架获取 JWT 令牌

Question

我有一个返回 JWT 的 SpringBoot 后端 Java 应用程序。这是我的代码

@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;
        }

它会像这样返回 TEXT

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJkZWR5cHVqaSIsInJvbGVzIjoiYWRtaW5pc3RyYXRvciIsImlhdCI6MTQ5NzA3NDQ3OX0.i7CjOhNScJRZc5dKhGaNFwje_5-PcOWDwlHD68fmOrw

如何在我的 angular2 代码中保存该令牌并获取用户名

到目前为止，这是我的 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错在哪里？我检查了谷歌浏览器的开发人员工具并检查了本地存储，但那里没有出现任何令牌。请帮忙。谢谢:)

Answer 1

有几个错误。

1. 您从未真正发送 POST 请求，因为您从未订阅 login() 方法返回的 observable。
2. 您的服务需要一个包含属性 token 的 JSON 对象。但是您的弹簧控制器不返回 JSON。它返回一个字符串。
3. 您无需调用 JSON.stringify() 并通过 HTTP 服务传递 Content-Type 标头。只需将要发送的对象传递给您，服务会为您将其字符串化，并设置适当的内容类型。