如何在Angular应用中用Guards和NGRX实现Azure AD初始认证

针对你遇到的内网Angular应用Azure AD认证问题，提供两种可行方案，以及优化建议：

方案一：保存目标路由，认证成功后自动跳转 #

这是你提到的简单解决方式，核心是记录用户原本要访问的URL，等认证完成后再跳转回去，避免守卫强制重定向到首页。

1. 修改路由守卫，保存目标URL #

在路由守卫中，当检测到用户未认证时，把当前要访问的路由存入sessionStorage：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
  return combineLatest([
    this.store.select(selectUser),
    this.store.select(selectIsLoading)
  ]).pipe(
    map(([user, isLoading]) => {
      if (isLoading) return true; // 正在认证，允许等待
      if (user) return true;
      
      // 保存用户原本要访问的地址
      sessionStorage.setItem('targetRedirectUrl', state.url);
      // 暂时重定向到首页（或空白加载页）
      return this.router.createUrlTree(['/']);
    }),
    first()
  );
}

2. 认证成功后跳转回目标URL #

在loginSuccess的effect中，读取保存的URL并跳转，完成后清空存储：

loginSuccess$ = createEffect(() => {
  return this.actions$.pipe(
    ofType(AuthActions.loginSuccess),
    tap(() => {
      const targetUrl = sessionStorage.getItem('targetRedirectUrl');
      if (targetUrl) {
        this.router.navigateByUrl(targetUrl);
        sessionStorage.removeItem('targetRedirectUrl');
      }
    })
  );
}, { dispatch: false });

方案二：改造AuthService，等待认证完成再返回结果 #

这个方案更贴合"无缝认证"的需求，让initialize方法不再提前返回null，而是等待整个认证流程完成后才返回用户信息。

1. 修改AuthService的initialize方法 #

调整逻辑：当需要触发登录重定向时，不返回null，而是抛出特定标记错误，让effect跳过失败动作（因为页面会刷新，后续重新执行认证逻辑）：

async initialize(): Promise<User> { // 改为只返回User或抛出错误，不再返回null
  if (!this.isBrowser || !this.msalInstance) {
    throw new Error("认证功能不支持当前环境");
  }

  await this.msalInstance.initialize();
  
  // 检查已有登录账户
  const accounts = this.msalInstance.getAllAccounts();
  if (accounts.length > 0) {
    try {
      const tokenResponse = await this.msalInstance.acquireTokenSilent({
        account: accounts[0],
        scopes: ["user.read"]
      });
      return this.fetchUserFromApi(tokenResponse.accessToken);
    } catch (silentErr) {
      console.warn("静默获取Token失败，将触发登录重定向");
    }
  }

  // 处理重定向返回的结果
  const redirectResponse = await this.msalInstance.handleRedirectPromise();
  if (redirectResponse && redirectResponse.account) {
    return this.fetchUserFromApi(redirectResponse.accessToken);
  }

  // 触发登录重定向，抛出标记错误，告知effect无需处理失败
  this.login();
  throw new Error("LOGIN_REDIRECT_STARTED");
}

2. 调整effect逻辑，处理登录重定向标记 #

在effect中捕获特定错误，不派发loginFailure，避免store中存入错误状态：

loginStart$ = createEffect(() => {
  return this.actions$.pipe(
    ofType(AuthActions.loginProcess),
    mergeMap(() => {
      return from(this.authService.initialize()).pipe(
        map(user => AuthActions.loginSuccess({ user })),
        catchError(error => {
          if (error.message === "LOGIN_REDIRECT_STARTED") {
            // 登录重定向已触发，页面会刷新，无需派发失败动作
            return EMPTY;
          }
          return of(AuthActions.loginFailure({ error }));
        })
      );
    })
  );
});

3. 优化AuthState，增加认证中状态 #

在AuthState里添加isAuthenticating字段，让路由守卫能区分"正在认证"和"未认证"状态：

export interface AuthState {
  user: User | null;
  isLoading: boolean;
  isAuthenticating: boolean; // 新增：标记是否正在执行认证流程
  error: any;
}

在loginProcess动作触发时设置isAuthenticating: true，loginSuccess/loginFailure时设为false，路由守卫检测到该状态为true时，允许页面等待，不强制重定向。

额外优化建议 #

1. 内网环境可选弹窗登录：如果内网浏览器允许弹窗，可以用msalInstance.loginPopup()代替loginRedirect()，避免页面刷新，进一步提升无缝体验。
2. 处理认证取消场景：在handleRedirectPromise中捕获用户取消登录的错误，派发loginFailure动作，提示用户重新尝试。
3. Token过期处理：在acquireTokenSilent失败时，除了触发登录，还可以考虑先尝试acquireTokenRedirect，减少不必要的全量登录流程。

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