Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Pegar token da url angular 7 ao entrar na rota principal

Boa noite, estou com uma dúvida onde eu faço para eu pegar o token da url exemplo : http://sistema.com.br/?token_sessao=LmrKPnKHe057RXcK_VLadfgdfg02McNnBHWj_fKM4=#/ ao inicializar o Angular e da um post para o meu back end com esse token

insira seu código aqui

insira seu código aqui
9 respostas
solução!

Ola Flávio,

injeta o xxx no construtor do seu componente, conforme código abaixo:

import { ActivatedRoute } from "@angular/router";
constructor(private route: ActivatedRoute) { }

Quando quiser obter o token, por exemplo, no onInit, utilize o route conforme o exemplo:

ngOnInit() {
  const token = this.route.snapshot.paramMap.get("token_sessao");
}

Att.

Bom dia Eduardo Ribeiro da Silva, eu colocaria isso no component principal ?

tenho o seguinte requisito que o angular pegue o token da url e de o post para o banck-end se o retorno do back-end for true ele carrega o sistema

A solução que informei diz respeito a obter qualquer parâmetro da URL, mas sendo sincero, quando lida-se com token, normalmente o fluxo mais comum é o seguinte:

1) Quando realizar a autenticação, onde normalmente o servidor retorna o token (JWT - JSON Web Token, por exemplo), armazenar o mesmo no LocalStorage 2) Em cada requisição que precisa ser feita apenas por usuário autenticado, o token é passado no header "Authentication", se for do tipo bearer, o valor do token seria : "Bearer skljfw47928347ewyaiasdqw6e..." (algo parecido com isto). 3) No lado do servidor o backend valida o token e permite (ou não) que a requisição prossiga.

Vc está usando o que no backend, SpringBoot?

Att.

Eu entendo esse padrão o meu problema hoje é que não controlo autenticação por isso o sistema "pai" compartilha o token na url que no caso eu faço post dele como fosse a senha do usuário para autenticar o serviço

Entendo.

Ao pegar o token na url conforme o código:

const token = this.route.snapshot.paramMap.get("token_sessao");

Vc precisará saber como o back está esperando o token. É pela URL ou no Header!? Dependendo da forma como o back espera será diferente.

Qual é o seu caso?

o sistema espera pelo Header

Segue abaixo alguns método de infraestrutura (arquitetura) que costumo utilizar em minhas aplicações. Especial atenção ao método deductHeader(), que basicamente retorna um HttpHeader com ou sem token, dependendo se existe um token no localStorage ou não. Se existir, a requisição irá incluir o token no header, caso contrário retorna um HttpHeader sem token. Mas isso pra vc é irrelevante, no teu caso considere que vc obtém o token da URL e inclui no header. Não é demais citar que no meu caso eu armazeno no localStorage um objeto que representa o usuário e que tem nele o token, por isso o método getToken() pega o usuário no localStorage para aí sim obter o token, mas isso é irrelevante porque no seu caso vc obtém o token da URL diretamente.

Segue o código:

protected deductHeader() {
    return {headers: this.hasToken() ? this.securityHeaders() : this.headers()};
  }

  protected headers(): HttpHeaders {
    return new HttpHeaders({
      'Content-Type': 'application/json'
    });
  }

  protected securityHeaders(): HttpHeaders {
    return new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': this.getToken()
    });
  }

protected getCurrentUser() {
    const ret = localStorage.getItem('currentUser');
    if (ret) {
      return JSON.parse(ret);
    }

    return null;
  }

 protected getToken(): string {
    const currentUser = this.getCurrentUser();
    if (currentUser) {
      return currentUser.token;
    }

    return null;
  }

  hasToken(): boolean {
    const jwt = this.getToken();

    return jwt != null && jwt !== '';
  }

Usando estes métodos utilitários, que estão em uma classe básica (super classe) das classes de serviço, o post poderia ser feito com o método abaixo:

incluirCliente(model: Cliente): Observable<Cliente> {
    return this.httpClient.post<Cliente>(this.url(), JSON.stringify(model), this.deductHeader());
  }

Bem, fazendo as devidas adaptações para a sua realidade, creio que poderá lhe ajudar.

Att.

Boa tarde Eduardo Ribeiro da Silva, você está me ajudando muito essa parte que você mandou agora resolve uma parte do meu problema

Maravilha!!! Fico feliz em poder ajudar o amigo.

Não esquece de colocar a resposta como solução do tópico, se realmente foi o caso é claro ;)

Att.