Angular如何从oAuth Cookie中提取用户名填充输入框且支持用户修改

首先给你提供可直接复用的实现方案，适配你当前的Angular代码逻辑：

1. 先实现Cookie读取工具方法 #

你可以直接在对应的组件类里加这个工具函数，不需要引入第三方依赖：

// 读取指定名称的Cookie值
getCookie(name: string): string {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop()?.split(';').shift() || '';
  return '';
}

2. 组件初始化时自动填充用户名 #

在组件的ngOnInit生命周期钩子中调用上面的方法读取Cookie里的用户名，验证格式符合你输入框的正则要求后，赋值给表单控件即可，自动填充后不会影响用户后续手动修改：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  // 保持你的原有组件配置不变
})
export class YourComponent implements OnInit {
  homeForm = new FormGroup({
    Username: new FormControl('')
  });

  ngOnInit(): void {
    // 替换成你OAuth实际存用户名的Cookie键名
    const oauthUsername = this.getCookie('oauth_username');
    // 校验符合你输入框的正则规则：t开头+4-9位字符
    const userNamePattern = /^t\w{4,9}$/;
    if (oauthUsername && userNamePattern.test(oauthUsername)) {
      this.homeForm.controls.Username.setValue(oauthUsername);
    }
  }

  getCookie(name: string): string {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop()?.split(';').shift() || '';
    return '';
  }
}

3. 可选优化（如果你的项目混用模板驱动表单） #

如果你当前的逻辑优先用ngModel绑定，也可以直接给ngModel绑定的变量赋值即可，效果完全一致：

// 组件里定义绑定变量
userName = '';

ngOnInit(): void {
  const oauthUsername = this.getCookie('oauth_username');
  const userNamePattern = /^t\w{4,9}$/;
  if (oauthUsername && userNamePattern.test(oauthUsername)) {
    this.userName = oauthUsername;
  }
}

对应的输入框只要把ngModel改成双向绑定即可：

<input
  [formControlName]="homeForm.Username"
  [name]="homeForm.Username"
  type="text"
  id="userName"
  placeholder="userName"
  [(ngModel)]="userName"
  pattern="^t\w{4,9}$">

注意事项 #

• 替换代码里的oauth_username为你OAuth服务实际存储用户名对应的Cookie键名
• 如果Cookie设置了HttpOnly属性，前端JS是无法读取的，需要后端调整Cookie配置去掉该属性才能正常获取值
• 正则校验和你现有输入框的校验规则保持了一致，避免非法值填充到输入框，不需要额外调整校验逻辑

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