Angular 11 - 登录后显示用户电子邮件

Posted 2023-03-10

【中文标题】Angular 11 - 登录后显示用户电子邮件

【英文标题】：Angular 11 - Display user email after login

【发布时间】：2021-08-10 10:42:42

【问题描述】：

我正在使用 Angular 11 和 .NET Core 以及 Web API JWT 令牌身份验证来创建用户登录。我成功创建了用户登录并成功重定向到仪表板，但我不知道如何在仪表板的工具栏中显示登录的用户电子邮件。 我必须在成功登录后这样做。

loginservice.ts:

import  Component, OnInit  from '@angular/core';
import  LoginService  from 'src/app/services/login.service';
    
@Component(
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
)
export class LoginComponent implements OnInit 
    
    credentials=
        useUserID:'',
        useUserPassword:''
    
    constructor(private loginService:LoginService)  
    
    ngOnInit(): void 
    
    onSubmit()
      if((this.credentials.useUserID!='' && this.credentials.useUserPassword!='')&& (this.credentials.useUserID!=null && this.credentials.useUserPassword!=null ))
        
          console.log("We have to submitt the form");
    
          //token generate
          this.loginService.generateToken(this.credentials).subscribe(
            (response:any)=>
              //success (parameter) response:Object
              console.log(response.token);
              this.loginService.loginUser(response.token)
              window.location.href="/dashboard"
            ,
            //error
            error=>
            console.log(error);
            
          )
          
    
        else
        console.log("Field are empty");  
      
    

logincomponent.ts:

import  HttpClient  from '@angular/common/http';
import  Injectable  from '@angular/core';
    
@Injectable(
      providedIn: 'root'
)
export class LoginService 
    
      url="http://"
    
      constructor(private http:HttpClient)  
    
      //calling the server to generate token
     generateToken(credentials:any)
        return this.http.post(`$this.url/token`,credentials,responseType:"text")
      
    
      //for login user
      loginUser(token)
      
        localStorage.setItem("token",token)
        return true;
    
      
    
      //to check that user login or not
    
      isLoggedIn()
      
        let token=localStorage.getItem("token");
        if(token==undefined || token=== '' || token==null)
        
          return false;
    
        
        else 
          return true;
        
      
      //To logout the user
      logout ()
      
        localStorage.removeItem('token')
        return true;
      
    
      //for gettinh the token
      getToken()
      
        return localStorage.getItem('token')
      

【参考方案1】：

首先通过npm i jwt-decode安装包jwt-decode

像这样import jwt_decode from 'jwt-decode';将它导入到你的组件中

然后从本地存储加载 JWT Token 并解码：

token = localStorage.getItem("token");
email = jwt_decode(this.token)['email'];

html

<p>email</p>

使用 jwt.io 检查您的 JWT 令牌，以确保包含电子邮件。