Olá!
Recuperei o nome de usuário de uma forma diferente da feita pelo professor e gostaria de saber se a forma que fiz é considerada uma "prática ruim".
Minha API retorna o token no body. Usei Spring Boot + Java no meu Back e o DTO para o controller de login, que retorna o token, estava assim (omiti as annotations aqui):
public class LoginResp {
private String email;
private String token;
}
A este DTO adicionei name também, para poder pegá-lo no Front, ficando assim:
public class LoginResp {
private String name;
private String email;
private String token;
}
Daí, no Front fiz assim:
1 - Adicionei métodos getName() e setName() no token.service.ts criado pelo professor:
export class TokenService {
readonly KEY_TOKEN = 'token';
//Adicionei esta constante para colocar o nome da chave
readonly KEY_NAME = 'name';
hasToken() {
return !!this.getToken();
}
getToken() {
return window.localStorage.getItem(this.KEY_TOKEN);
}
setToken(token: any) {
window.localStorage.setItem(this.KEY_TOKEN, token);
}
removeToken() {
window.localStorage.removeItem(this.KEY_TOKEN);
}
//Adicionei estes dois métodos:
getName() {
return window.localStorage.getItem(this.KEY_NAME);
}
setName(name: any) {
window.localStorage.setItem(this.KEY_NAME, name);
}
}
2 - Alterei o método authenticate() para também pegar o name do body retornado pela requisição de login:
authenticate(user: User) {
return this.http.post<Login>(this.API, user, { observe: 'response' })
.pipe(tap(res => {
const token = res.body?.token;
//Adicionei esta linha:
const name = res.body?.name;
if (token != undefined) {
this.tokenService.setToken(token);
}
//E estas linhas aqui:
if (name != undefined) {
this.tokenService.setName(name);
}
}));
}
Obs.: Aqui Login e User são interfaces que estou usando, pois da forma que está minha API no back, achei melhor criar estas interfaces.
3 - E no meu component em que queria colocar o nome, adicionei este método getName() para capturar o nome:
export class LayoutComponent implements OnInit {
constructor(private tokenService: TokenService) {
}
ngOnInit(): void {
this.getName();
}
getName() {
const name = this.tokenService.getName();
return name;
}
}
Então, no meu html, chamei este método getName(), fazendo uma interpolação: {{ getName() }}, e foi exibido o nome na tela.
Deu certo, mas fiquei pensando se é uma forma ruim de fazer e se tem uma melhor. Fiz assim porque meu token tem uma estrutura diferente, ele não traz o name quando decodifica:
{ "sub": "2,user@email.com", "iss": "Alan", "iat": 1659357346, "exp": 1659360946 }