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

Posted 2023-03-10

【中文标题】基于 Angular 角色的身份验证密钥斗篷和 Spring Boot

【英文标题】：Angular role based authentification keycloak and SpringBoot

【发布时间】：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" 
                    ]
                
            

【参考方案1】：

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

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

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

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