Angular+AWS Amplify登出后加载组件触发UserUnAuthenticatedException

核心原因 #

登出操作后Amplify Auth本地缓存未彻底清除，导致AppComponent初始化时，Amplify仍误判用户处于认证状态，调用需授权API触发异常；或是AppComponent未先校验用户认证状态就直接执行了需授权逻辑。

具体解决方案 #

1. 强化登出逻辑，彻底清理缓存 #

在signOut方法中，除全局登出外，额外添加缓存清除步骤：

import { Auth } from '@aws-amplify/auth';
import { Router } from '@angular/router';

// 组件内的登出处理方法
async handleSignOut() {
  try {
    await Auth.signOut({ global: true });
    // 清除Amplify缓存的认证状态
    await Auth.clearCachedAuthState();
    // 手动删除localStorage中Amplify相关缓存键
    Object.keys(localStorage).forEach(key => {
      if (key.startsWith('amplify-') || key.startsWith('CognitoIdentityServiceProvider')) {
        localStorage.removeItem(key);
      }
    });
    // 跳转至登录页
    this.router.navigate(['/login']);
  } catch (err) {
    console.error('登出失败:', err);
  }
}

2. AppComponent初始化前先校验认证状态 #

避免直接调用需授权API，先通过currentAuthenticatedUser校验用户状态：

import { Auth } from '@aws-amplify/auth';

ngOnInit() {
  this.validateAuthStatus();
}

async validateAuthStatus() {
  try {
    // 强制从服务端校验用户状态，跳过本地缓存
    const user = await Auth.currentAuthenticatedUser({ bypassCache: true });
    // 用户已认证，执行后续业务逻辑
    this.initAuthenticatedFlow(user);
  } catch (err) {
    // 用户未认证，处理未登录状态
    this.initUnauthenticatedFlow();
  }
}

private initAuthenticatedFlow(user: any) {
  // 加载用户信息、调用需授权API等操作
}

private initUnauthenticatedFlow() {
  // 初始化未登录状态，比如跳转登录页
  // this.router.navigate(['/login']);
}

3. 调整Amplify Auth配置适配LocalStack #

确保LocalStack环境下的Auth配置正确，指定LocalStack的Cognito端点：

import { Amplify } from 'aws-amplify';

Amplify.configure({
  Auth: {
    region: 'us-east-1',
    userPoolId: '你的LocalStack用户池ID',
    userPoolWebClientId: '你的LocalStack客户端ID',
    // LocalStack Cognito服务端点
    endpoint: 'http://localhost:4566',
    authenticationFlowType: 'USER_PASSWORD_AUTH',
    // 调试阶段可临时禁用缓存
    // storage: null
  }
});

4. 检查路由守卫与初始化顺序 #

• 确保Angular路由守卫正确拦截未认证用户，禁止访问需授权路由；
• 确认Amplify配置在AppComponent初始化前完成（比如在main.ts中先配置Amplify再启动应用）：

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { Amplify } from 'aws-amplify';
import amplifyConfig from './amplifyconfiguration.json';

// 先完成Amplify配置
Amplify.configure(amplifyConfig);

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

关键提示 #

LocalStack的Cognito实现与AWS官方存在细微差异，登出后易出现缓存残留，手动清除localStorage是最直接的兜底方案；bypassCache: true参数可强制从服务端校验用户状态，避免依赖本地过期缓存数据。

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