为什么用户未使用keycloak登录时angular无法识别？

Question

因此，我试图在我的角度应用程序上使用keycloak设置一个sso系统。

我已经下载了密钥库库keycloak-angular@4.0.2，在本地主机：8080 / auth上设置了密钥库服务器，在应用程序的根目录上添加了密钥库，该密钥库是为我创建的：

   {
  "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初始化函数：

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.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 {
}

Answer 1

解决了，我以错误的方式使用了密钥斗篷。