基于 Angular 角色的身份验证密钥斗篷和 Spring Boot答案

【问题标题】：Angular role based authentification keycloak and SpringBoot基于 Angular 角色的身份验证密钥斗篷和 Spring Boot
【发布时间】：2021-03-05 12:51:28
【问题描述】：

我想在 Angular 前端和 SpringBoot 后端之间设置身份验证。我有一个配置了 SpringBoot 和功能的 SpringBoot 身份验证服务器。 Front 可以对 Keycloak 进行身份验证，并可以访问 SpringBoot API。

问题是我想知道如何知道用户是否已登录以显示登录按钮。

第二件事是我希望显示一些页面，而其他页面不显示，这取决于用户的角色。

如果您知道的话，作为奖励...我想根据用户的角色显示 DOM 的某些部分。

（这是我第一次设置这个系统...感谢您的帮助） Keycloak 和 Spring 方面没有问题，连接正常，重定向到 Angular 也正常。承载保存OK

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" }
                    ]
                }
            }

【问题讨论】：

标签： angular spring-boot oauth-2.0 keycloak jwt-auth

【解决方案1】：

您需要添加的只是 Angular 防护（可能还有身份验证服务）。

我已经设置了一个关于 Open ID 的最小 mono-repo for a meetup，具有非常相似的堆栈：spring RESTful API（好吧它是 servlet，不是响应式的）、Angular 前端和 Keycloak 授权服务器。

我建议你克隆并破解它。对于 Angular 特定部分，请仔细查看：

Angular guard 以及 routes definition 中的用法
authentication service

【讨论】：