Veja nesse artigo como decodificar o seu token JWT e ler o seu payload.
Dando continuidade aos meus artigos sobre Angular e JWT, hoje eu irei demonstrar como decodificar os dados de um token no lado do seu front.
Caso tenha interesse em ler os meus artigos anteriores sobre esse assunto, segue o link de cada um deles abaixo:
O objetivo desse artigo não sera demonstrar como configurar o JWT em um projeto angular, ele será rápido e objetivo demonstrado através de alguns trechos de código.
O primeiro passo será importar o pacote jwt-decode. Para isso, abra um terminal no seu computador, navegue até o seu projeto e execute o comando abaixo:
npm i jwt-decode --save
Agora execute o comando abaixo para criar serviço no seu projeto para ser responsável por decodificar o token:
ng g s shared/authToken
Em seguida atualize ele com o seguinte trecho de código:
import { Injectable } from '@angular/core';
import * as jwt_decode from 'jwt-decode';
@Injectable({
providedIn: 'root'
})
export class AuthTokenService {
public getToken(): string {
return localStorage.getItem('token');
}
public decodePayloadJWT(): any {
try {
return jwt_decode(this.getToken());
} catch (Error) {
return null;
}
}
}
Analisando o trecho de código anterior, note que nós temos um método chamado getToken(), responsável por pegar o token do seu localStorage e um outro método chamado decodePayloadJWT() retornando any, esse método irá decodificar o token e retornar os seus dados de payload.
Obs.: Esse método está retornando any porque o payload pode variar de projeto para projeto, caso você já tenha um contrato definido de retorno o ideal será criar um class ou interface com os dados de retorno no lugar de any.
Bem simples né?
Agora você pode injetar o seu código nos seus componentes e receber os dados do seu token 😉
Espero que tenham gostado e até um próximo artigo pessoal 😉
Fonte: https://medium.com/xp-inc/angular-decode-payload-jwt
Gostou deste artigo? Comente abaixo!