为啥 Angular 无法识别用户是不是使用 keycloak 登录？

Posted 2023-02-19

【中文标题】为啥 Angular 无法识别用户是不是使用 keycloak 登录？

【英文标题】：Why angular is not recognizing if a user is logged in with keycloak?为什么 Angular 无法识别用户是否使用 keycloak 登录？

【发布时间】：2019-04-15 08:19:37

【问题描述】：

所以我正在尝试在我的 Angular 应用程序上设置一个带有 keycloak 的 sso 系统。

我已经下载了 keycloak 库 keycloak-angular@4.0.2，在 localhost:8080/auth 设置了一个 keycloak 服务器，在应用程序的根目录添加了 keycloak.json，该 keycloak 为我制作：

   
  "realm": "my-app",
  "auth-server-url": "http://localhost:8080/auth",
  "ssl-required": "external",
  "resource": "my-app",
  "public-client": true,
  "confidential-port": 0
  

我还在main.ts中添加了keycloak initi函数：

import  enableProdMode  from '@angular/core';
//....some other import....
import  KeycloakService  from 'keycloak-angular';


var injector = ReflectiveInjector.resolveAndCreate([KeycloakService]);
var keycloak = injector.get(KeycloakService)

if (environment.production) 
    enableProdMode();




keycloak.init()
    .then(() => platformBrowserDynamic().bootstrapModule(AppModule))
    .catch(e => 
        console.error(e);
    );

现在，如果我尝试制作一个注册页面，如下所示：

export class registration implements OnInit 

  constructor(keycloak:KeycloakService) 

    keycloak.register();

   

  ngOnInit() 

  

它工作并将我发送到一个注册页面，如果我创建一个帐户，它会出现在 keycloak 服务器中。 但是...即使我没有使用任何帐户登录，它也可以让我访问任何页面，如果我尝试：

keycloak.isLoggedIn().then(() => console.log("logged"), ()=>console.log("Not logged"));

结果是“记录”，但如果我尝试：

keycloak.loadUserProfile();

然后它说

The user profile was not loaded as the user is not logged in.

我不明白它是如何工作的，我错过了什么吗？ 所以我的问题是： - 如果我没有登录，如何防止页面显示？ - 我如何创建用户日志并保持日志记录和角度来识别谁已登录和谁未登录。

更新：根据要求，我正在添加 app.module.ts

import  BrowserModule, HAMMER_GESTURE_CONFIG  from '@angular/platform-browser';
import  NgModule, APP_INITIALIZER  from '@angular/core';
import  TranslateModule  from '@ngx-translate/core';
import  HttpClientModule  from '@angular/common/http';
import  KeycloakService, KeycloakAngularModule  from 'keycloak-angular';
import  initializer  from './utils/app-init';

import  AppComponent  from './app.component';
import  AppRoutingModule  from './app-routing.module';

import  AuthenticationModule  from './core/auth/authentication.module';
import  NgxPermissionsModule  from 'ngx-permissions';

import  LayoutModule  from './content/layout/layout.module';
import  PartialsModule  from './content/partials/partials.module';
import  CoreModule  from './core/core.module';
import  AclService  from './core/services/acl.service';
import  LayoutConfigService  from './core/services/layout-config.service';
import  MenuConfigService  from './core/services/menu-config.service';
import  PageConfigService  from './core/services/page-config.service';
import  UserService  from './core/services/user.service';
import  UtilsService  from './core/services/utils.service';
import  ClassInitService  from './core/services/class-init.service';
import  NgbModule  from '@ng-bootstrap/ng-bootstrap';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  GestureConfig, MatProgressSpinnerModule  from '@angular/material';
import  OverlayModule  from '@angular/cdk/overlay';

import  MessengerService  from './core/services/messenger.service';
import  ClipboardService  from './core/services/clipboard.sevice';

import  PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface  from 'ngx-perfect-scrollbar';
import  LayoutConfigStorageService  from './core/services/layout-config-storage.service';
import  LogsService  from './core/services/logs.service';
import  QuickSearchService  from './core/services/quick-search.service';
import  SubheaderService  from './core/services/layout/subheader.service';
import  HeaderService  from './core/services/layout/header.service';
import  MenuHorizontalService  from './core/services/layout/menu-horizontal.service';
import  MenuAsideService  from './core/services/layout/menu-aside.service';
import  LayoutRefService  from './core/services/layout/layout-ref.service';
import  SplashScreenService  from './core/services/splash-screen.service';
import  DataTableService  from './core/services/datatable.service';


import 'hammerjs';
import  AppAuthGuardComponent  from './utils/keycloak/app-auth-guard/app-auth-guard.component';
import  KEYCLOAK_HTTP_PROVIDER  from './utils/keycloak/keycloak.http';

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = 
    // suppressScrollX: true
;

@NgModule(
    declarations: [AppComponent, AppAuthGuardComponent],
    imports: [
        BrowserAnimationsModule,
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        LayoutModule,
        PartialsModule,
        CoreModule,
        OverlayModule,
        AuthenticationModule,
        NgxPermissionsModule.forRoot(),
        NgbModule.forRoot(),
        TranslateModule.forRoot(),
        MatProgressSpinnerModule,
        KeycloakAngularModule,
    ],
    providers: [
        AclService,
        LayoutConfigService,
        LayoutConfigStorageService,
        LayoutRefService,
        MenuConfigService,
        PageConfigService,
        UserService,
        UtilsService,
        ClassInitService,
        MessengerService,
        ClipboardService,
        LogsService,
        QuickSearchService,
        DataTableService,
        SplashScreenService,
        KeycloakService,
        KEYCLOAK_HTTP_PROVIDER,
        
            provide: PERFECT_SCROLLBAR_CONFIG,
            useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
        ,
        
            provide: APP_INITIALIZER,
            useFactory: initializer,
            multi: true,
            deps: [KeycloakService]
        ,


        // template services
        SubheaderService,
        HeaderService,
        MenuHorizontalService,
        MenuAsideService,
        
            provide: HAMMER_GESTURE_CONFIG,
            useClass: GestureConfig
        
    ],
    bootstrap: [AppComponent]
)
export class AppModule 

【问题讨论】：

你实现APP_INITIALIZER了吗？

是的，我确实实现了它。

【参考方案1】：

检查并将loadUserProfileAtStartUp: true, 添加到初始化配置中，

我的如下，它已经为我解决了这个问题，

导出函数初始化器（keycloak：KeycloakService）：（）=> Promise return (): 承诺 => return new Promise(async (resolve, reject) => 尝试 等待 keycloak.init( 配置： 网址：environment.keycloak.issuer， 领域：environment.keycloak.realm， clientId：environment.keycloak.clientId , loadUserProfileAtStartUp：真， 初始化选项： onLoad: 'check-sso', checkLoginIframe: 真 , BearerExcludedUrls: [] ); 解决（1）； 捕捉（错误） 拒绝（错误）； ); ;