如果用户未登录，如何重定向到 Angular 自定义登录页面

Question

在我当前的案例中，我有一个 Angular 应用程序，其中包含 Azure AD 和 MSAL v2 实现。 我想要实现的是，当用户未登录时，使用简单的登录 (click)="login()"按钮将他们重定向到自定义登录页面。 我已经按照这个项目到达了我现在所在的位置，但不幸的是，在导航到 localhost:4200 的“/”路径后，我被直接重定向到 Microsoft 登录页面而不是“ /login ”。 我在这里错过了什么吗？ 这是我的路由模块：

const routes: Routes = [
  {
    path: '',
    component: HomeLayoutComponent,
    canActivate: [MsalGuard],
    children: [
      { path: '', component: WelcomeComponent, pathMatch: 'full'},
      { path: 'map-requests', component: MapRequestsComponent},
      { path: 'map-requests/map-request/details', component: MaprequestDetailComponent }
    ]
  },
  {
    path: '',
    component: LoginLayoutComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      }
    ]
  },
  { path: '**', redirectTo: '' }
];

在堆栈上发现了类似的问题： this

Answer 1

感谢这篇文章，我找到了解决方案，解决方案是添加第二个守卫，它将检查用户是否登录，这就是 auth 守卫的样子。

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { InteractionStatus } from '@azure/msal-browser';
import { Observable, of } from 'rxjs';
import { filter, switchMap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class CanActivateGuard implements CanActivate {
    constructor(private msalService: MsalService,
        private router: Router,
        private msalBroadcastService: MsalBroadcastService) { }

    canActivate(route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.msalBroadcastService.inProgress$
            .pipe(
                filter((status: InteractionStatus) => status === InteractionStatus.None),
                switchMap(() => {
                    if (this.msalService.instance.getAllAccounts().length > 0) {
                        return of(true);
                    }

                    this.router.navigate( ['/auth/login'] );
                    return of(false);
                }),
            );
        }
}

注意：根据您的 rxjs 版本，您可能需要像这样从 rxjs 库中导入运算符

import { Observable, of, filter, switchMap } from 'rxjs';