1
resposta

Dúvida: Recuperar nome de usuário

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 }

1 resposta

Olá Alan, tudo bem com você?

Peço desculpas pela demora em obter um retorno.

Sua solução para recuperar o nome de usuário é uma alternativa válida e funcional. De qualquer forma, é sempre bom lembrar que quando trabalhamos com programação, não há uma única solução que irá atender todos os casos e projetos, devemos ter em mente que para cada projeto que atuamos podemos ter meios diferentes para se chegar a um resultado. O importante é avaliar as opções e escolher a que melhor se adequa ao seu projeto.

Continue mergulhando em conhecimento e não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Abraços e bons estudos!