基于 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以及在路由定义中的使用
• 认证服务