Angular15+ASP.NET Core6 Cookie认证页面重载自动显示用户名方案咨询

方案一：后端将用户信息嵌入初始HTML（推荐，无额外请求） #

这就是你观察到的主流网站做法，ASP.NET Core可以在返回初始HTML文档时，直接把当前登录用户的用户名注入到页面中，Angular初始化时读取即可，完全不需要额外请求：

1. 后端修改（Razor视图）
   在主布局文件（比如_Layout.cshtml）或者Angular入口的Index.cshtml中，通过Razor语法获取当前用户的用户名，嵌入到页面的全局变量或隐藏元素中：

   <!-- 方式1：定义全局JS变量 -->
   <script>
     window.currentUser = {
       username: '@User.FindFirstValue("UserName")' // 替换成你登录时添加的声明名称
     };
   </script>
   
   <!-- 方式2：隐藏DOM元素存储 -->
   <div id="current-username" style="display: none;">@User.FindFirstValue("UserName")</div>
   

   注：如果登录时用的是ClaimTypes.Name声明，直接用@User.Identity.Name即可。

2. Angular前端读取
   在根组件（比如app.component.ts）初始化时读取这个值：

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     currentUsername: string = '';
   
     ngOnInit(): void {
       // 读取全局变量方式
       this.currentUsername = (window as any).currentUser?.username || '';
   
       // 或者读取隐藏DOM元素方式
       // const usernameElement = document.getElementById('current-username');
       // this.currentUsername = usernameElement?.textContent || '';
     }
   }
   

   模板中直接渲染：

   <div *ngIf="currentUsername">您好，{{ currentUsername }}</div>
   

方案二：前端解析Cookie（仅适用于未加密的自定义Cookie） #

如果你的app-session Cookie是未加密的（生产环境不推荐，存在安全风险），可以用Angular的Cookie工具直接读取解析：

1. 安装依赖

   npm install ngx-cookie-service --save
   

2. 读取并解析Cookie

   import { Component, OnInit } from '@angular/core';
   import { CookieService } from 'ngx-cookie-service';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     currentUsername: string = '';
   
     constructor(private cookieService: CookieService) {}
   
     ngOnInit(): void {
       const sessionCookie = this.cookieService.get('app-session');
       if (sessionCookie) {
         // 按你实际的Cookie存储格式解析，这里假设是JSON
         const sessionData = JSON.parse(sessionCookie);
         this.currentUsername = sessionData.username || '';
       }
     }
   }
   

   注意：ASP.NET Core默认的Cookie认证是加密的，这种情况下前端无法直接解析Cookie内容，此方案仅适用于你自定义的未加密Cookie。

安全提醒 #

• 不要在初始HTML或Cookie中存储敏感信息（如密码、手机号），仅保留必要的标识（如用户名、用户ID）。
• 生产环境优先用方案一，既安全又避免额外请求，符合主流网站的实现逻辑。

内容的提问来源于stack exchange，提问作者JackFord