基于JWT的认证页面仅刷新后渲染用户信息问题排查

开发基于JWT的认证Web应用时遇到以下问题：用户通过用户名密码登录后，系统将accessToken存入localStorage并跳转到首页，但首页的用户名只有刷新页面后才会显示。

问题根源 #

核心问题在于登录请求是异步操作，但onSubmit方法中直接调用了router.navigate(['/home'])，此时登录请求还未完成，token还未存入localStorage。当Home组件初始化时，localStorage.getItem('accessToken')拿到的是空值，导致获取用户信息的请求失败，页面自然不会渲染用户名。只有刷新页面时，token已存在，才能正确获取并显示。

解决方案 #

需要确保登录请求成功完成、token存入localStorage后，再跳转到首页。同时优化Home组件逻辑，增加空值判断避免无效请求。

修改后的 login-component.ts #

export class LoginComponent implements OnInit{
  authRequest:AuthenticationRequest={
    username:"",
    password:"",
  };
  errorMessage:string ="";

  constructor(private jwtService:JwtClientService,
              private router: Router) { }

  ngOnInit(): void {
  }

  public login(authRequest:AuthenticationRequest){
    let resp = this.jwtService.authenticate(authRequest);
    resp.subscribe({
      next: (data) => {
        console.log(data);
        localStorage.setItem('accessToken', data.accessToken);
        localStorage.setItem('refreshToken', data.refreshToken);
        // 登录成功后再跳转首页
        this.router.navigate(['/home']);
      },
      error: (error) => {
        this.errorMessage = error;
        console.log(error);
      }
    });
  }

  onSubmit():void{
    this.login(this.authRequest);
    // 移除此处的跳转逻辑
  }
}

修改后的 home-component.ts #

export class HomeComponent implements OnInit{
  username:any;
  errorMessage:string = "";
  response: any; // 补充声明模板中用到的response变量

  constructor(private jwtService: JwtClientService) {
  }

  ngOnInit(){
    const token = localStorage.getItem('accessToken');
    if(token){ // 增加token空值判断，避免无效请求
      this.getCurrentUserAccess(token);
    } else {
      this.errorMessage = "未检测到登录状态，请重新登录";
    }
  }


  public getCurrentUserAccess(token:any){
    let resp = this.jwtService.currentUserAccess(token);
    resp.subscribe({
      next: (data) => {
        console.log(data);
        this.response = data;
      },
      error: err => {
        console.log(err);
        this.errorMessage = err.error?.message || "获取用户信息失败";
      }
    });
  }
}

其他组件说明 #

• app-component.html：无需修改，保持原有路由链接即可。
• home.component.html：无需修改，但需确保组件类中已声明response变量（已在上述修改中补充）。
• jwt-client.service.ts：无需修改，接口调用逻辑正常。

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