javascript - 为什么 Angular 无法识别用户是否使用 keycloak 登录？

Question

所以我尝试在我的 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.

我不明白它是如何工作的，我错过了什么吗？
所以我的问题是:
- 如果我未登录，如何阻止显示页面？- 如何创建用户日志并保持登录状态并有 Angular 地识别谁已登录、谁未登录。

更新:按照要求，我正在添加 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 {
}

Answer 1

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

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

export function initializer(keycloak: KeycloakService): () => Promise {  return (): Promise => {    return new Promise(async (resolve, reject) => {      try {        await keycloak.init({          config: {            url: environment.keycloak.issuer,            realm: environment.keycloak.realm,            clientId: environment.keycloak.clientId          },          loadUserProfileAtStartUp: true,          initOptions: {            onLoad: 'check-sso',            checkLoginIframe: true          },          bearerExcludedUrls: []        });        resolve(1);      } catch (error) {        reject(error);      }    });  };}