Boa noite,
Estou fazendo a autenticação de usuário da minha aplicação no angular 2 utilizando JWT que consome os dados através da minha API java (Spring boot + Spring Security) .
Por referenciais utilizeis principalmente estes dois artigos:
https://cursos.alura.com.br/forum/topico-adicionando-token-em-toda-requisao-com-angular-2-solucao-27821 http://chariotsolutions.com/blog/post/angular-2-spring-boot-jwt-cors_part2/
No Postman eu consigo obter a autorização através do envio de um método POST para a API passando no header: o content-type: application/json e no corpo o usuário e a senha. Depois consigo consumir da API os jsons incluindo no header a authentication vindo do servidor.
A seguir segue meu componente login.component.ts.
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from '../autenticacao/UserService';
import { Usuario } from '../usuario/Usuario';
@Component({
moduleId: module.id,
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
model: any = {};
loading = false;
error = '';
private u : Usuario;
constructor(
private router: Router,
private userService: UserService) { }
login() {
console.log('Iniciando a autenticação');
this.u = new Usuario(this.model.username, this.model.password);
this.userService.autentica(this.u.usuario, this.u.senha)
.subscribe(result => {
if (result === true) {
console.log('consegui pegar o token ... debug')
} else {
this.error = 'Username or password is incorrect';
this.loading = false;
}
}, error => {
this.loading = false;
this.error = error;
});
}
}Aqui é o meu component: user.services.ts
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpService } from './HttpService';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class UserService {
private url: string = 'http://localhost:8080/auth';
private _loggedIn: BehaviorSubject<boolean> = new BehaviorSubject(false);
public loggedIn: Observable<boolean> = this._loggedIn.asObservable();
constructor(private http: Http) { }
autentica(username: String, password: String) : Observable<boolean> {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http
.post(this.url, JSON.stringify({'username': username, 'password': password}), {headers: headers})
.map( ( res: Response) => {
let token = res.json() && res.json().token;
if (token) {
localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
return true;
} else {
return false;
}
}).catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
logout() {
localStorage.removeItem('token');
}
isLoggedIn() {
let token = localStorage.getItem('token');
if(token){ //essa atribuição é feita para atualizar a variável e o resto do sistema ser notificado
this._loggedIn.next(true);
} else {
this._loggedIn.next(false);
}
return this._loggedIn.getValue();
}
}Quando eu entro com o login e a senha e pressiono o botão para autenticar, eu obtenho duas resposta do servidor back-end ..... uma com método OPTIONS e outra do POST que vem com o AUTHORIZATION.
Mas eu não consigo adicionar o meu token no localStorage.
Se puderem me dar uma luz pois já tem um certo tempo e já procurei e refiz muitos exemplos pela net.
Desde já agradeço.
Att.
