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

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

loginservice.ts

：

从'@angular/core'导入{Component，OnInit}；
从'src/app/services/login.service'导入{LoginService}；
@组成部分({
选择器：“应用程序登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.css']
})
导出类LoginComponent实现OnInit{
证书={
useUserID:“”，
useUserPassword:“”
}
构造函数（私有登录服务：登录服务）{}
ngOnInit（）：void{}
onSubmit（）{
if（（this.credentials.useUserID！=''&&this.credentials.useUserPassword！=''）&&&（this.credentials.useUserID！=null&&this.credentials.useUserPassword！=null））
{
log（“我们必须提交表单”）；
//令牌生成
this.loginService.generateToken（this.credentials）.subscribe(
（答复：任何）=>{
//成功（参数）响应：对象
console.log（response.token）；
this.loginService.loginUser（response.token）
window.location.href=“/dashboard”
},
//错误
错误=>{
console.log（错误）；
}
)
}否则
console.log（“字段为空”）；
}
}

logincomponent.ts

：

从'@angular/common/http'导入{HttpClient}；
从“@angular/core”导入{Injectable}；
@注射的({
providedIn:'根'
})
导出类登录服务{
url=“http://”
构造函数（私有http:HttpClient）{}
//调用服务器以生成令牌
generateToken（凭证：任意）{
返回this.http.post（`${this.url}/token`，凭证，{responseType:'text}）
}
//用于登录用户
登录用户（令牌）
{
setItem（“令牌”，令牌）
返回true；
}
//检查该用户是否登录
伊斯洛格丁（）
{
让token=localStorage.getItem（“token”）；
如果（标记==未定义的| |标记==''| |标记==空）
{
返回false；
}
否则{
返回true；
}
}
//要注销用户，请执行以下操作：
注销（）
{
localStorage.removietem（'token'）
返回true；
}
//为了得到代币
getToken（）
{
返回localStorage.getItem（'token'）
}
}

首先通过

npm i jwt decode

安装软件包

jwt decode

像这样将其导入组件

从“jwt decode”导入jwt_decode

然后从本地存储器加载JWT令牌并对其进行解码：

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

html

{{email}


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

<p>{{email}}</p>