基於 Angular 角色的身份驗證 keycloak 和 SpringBoot

Question

我想在我的 Angular 前端和 SpringBoot 后端之間設置一個身份驗證。 我有一個配置了 SpringBoot 和功能的 SpringBoot 身份驗證服務器。 Front 可以對 Keycloak 進行身份驗證並訪問 SpringBoot API。

問題是我想知道如何知道用戶是否已登錄以顯示登錄按鈕。

第二件事是我希望顯示某些頁面而其他頁面不顯示，這取決於用戶的角色。

如果你知道的話，作為獎勵......我想根據用戶的角色顯示 DOM 的某些部分。

（這是我第一次設置這個系統...感謝您的幫助） Keycloak 和 Spring 方面沒問題，連接正常，重定向到 Angular 也正常。 不記名保存確定

app.component.ts

import { Component } from '@angular/core';
import { OAuthService, NullValidationHandler, AuthConfig } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(private oauthService: OAuthService) {
    this.configure();
  }
authConfig: AuthConfig = {
    issuer: 'http://localhost:8081/auth/realms/api-team', // Keycloak Server
    redirectUri: window.location.origin + "/api-team", // My SpringBoot
    clientId: 'api-team-client-angular',
    scope: 'openid profile email offline_access api-angular',
    responseType: 'code',
    // at_hash is not present in JWT token
    // disableAtHashCheck: true,
    showDebugInformation: true
  }
  
  public login() {
    this.oauthService.initLoginFlow();
  }
  
  public logoff() {
    this.oauthService.logOut();
  }
  
  private configure() {
    this.oauthService.configure(this.authConfig);
    this.oauthService.tokenValidationHandler = new  NullValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }
}

只是一個測試.. app.component.html

<router-outlet>
  <button class="btn btn-default" (click)="login()">
    Login
  </button>
  <button class="btn btn-default" (click)="logoff()">
    Logout
  </button>
    <app-loader></app-loader>
</router-outlet>

我的路由器之一

export const MaterialRoutes: Routes = [
    {
        path: '',
        children: [
            // {
            //     path: 'services-namespace',
            //     component: ServicesProjetComponent,
            //     data: {
            //         title: "Composants d'un projet",
            //         urls: [
            //             { title: 'Dashboard', url: '/dashboard1' },
            //             { title: "Composants d'un projet" }
            //         ]
            //     }
            // },
            {
                path: 'namespaces',
                component: ProjetsComponent,
                data: {
                    title: "Liste des Projets",
                    urls: [
                        { title: 'Dashboard', url: '/dashboard1' },
                        { title: "Liste de Projets" }
                    ]
                }
            }

Answer 1

您需要添加的只是 Angular 防護（可能還有身份驗證服務）。

我已經為一個關於 Open ID的聚會設置了一個最小的mono-repo，堆棧非常相似：spring RESTful API（它是 servlet，不是響應式）、Angular 前端和 Keycloak 授權服務器。

我建議你克隆並破解它。 對於 Angular 特定部分，請仔細查看：

• Angular Guard以及在路由定義中的使用
• 認證服務