Angular MSAL 注销后重定向到 Microsoft 登录

Question

我目前正在从 Angular 和 MSAL 开始，但我不知道如何实现以下目标：

1. 当用户访问 WebApp 时，应出现 Microsoft 登录（通过 Azure AD）
2. 验证成功后，出现webapp
3. 当用户单击“注销”时，用户应该注销
4. 注销后，他应该返回到步骤 1.，因此他应该再次看到 Microsoft 登录

这是我的 app.module.ts 中的内容：

    MsalModule.forRoot({
      auth: {
        clientId: '...', // This is your client ID
        authority: '...',
        // redirectUri: 'https://localhost:5001',
        postLogoutRedirectUri: '**<--THIS MAYBE? BUT WHAT URL DO I PUT HERE TO COME BACK TO THE MICROSOFT LOGIN PAGE??**'
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      },
    }, {
      popUp: false,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        // ['https://graph.microsoft.com/v1.0/me', ['user.read']]
      ],
      extraQueryParameters: {}
    })
  ],...

这是我的 app-routing.module.ts：

const routes: Routes = [
  {
    path: '', canActivate: [MsalGuard], children: [
      {path: '', component: HomeComponent},
      {path: 'home', component: HomeComponent},
      {path: 'tools', component: ToolsComponent}
    ]
  }
];

我现在的解决方案的问题是：当我注销时，它将再次转到WebApp，然后重定向到MS登录页面。但我希望他直接进入 MS 登录页面，以便用户不再看到 web 应用程序的任何内容（注销后）。

我真正需要防止的是，如果用户没有登录，他就可以看到 web 应用程序的任何内容。所以我不想将他重定向到组件（因为这样他就会再次看到内容）。

Answer 1

您必须通过组件或服务调用注销方法（“@azure/msal-angular”的 MsalService）。请参考下面的代码。

import { MsalService  } from '@azure/msal-angular';

constructor(
    private msalService: MsalService
) { }

onLogout(){
    this.msalService.logout();
}