angular - Keycloak 和 Angular - 无法读取未定义的属性“resourceAccess”
问题描述
我有角度应用程序,我尝试添加 keycloak。我设置了keycloak,但是当我尝试运行角度应用程序时,我得到了
ERROR Error: Uncaught (in promise): An error happened during access validation. Details:TypeError: Cannot read property 'resourceAccess' of undefined
角度版本:8.2.5 Keycloak-angular:7.0.1 Keycloak-js:7.0.0
这是我的 auth.guard.ts
import { Injectable } from "@angular/core";
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { KeycloakService, KeycloakAuthGuard } from "keycloak-angular";
@Injectable()
export class AppAuthGuard extends KeycloakAuthGuard {
constructor(protected router: Router, protected keycloakAngular: KeycloakService) {
super(router, keycloakAngular);
}
isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
return new Promise(async (resolve, reject) => {
if (!this.authenticated) {
this.keycloakAngular.login();
return;
}
const requiredRoles = route.data.roles;
if (!requiredRoles || requiredRoles.length === 0) {
return resolve(true);
} else {
if (!this.roles || this.roles.length === 0) {
resolve(false);
}
let granted: boolean = false;
for (const requiredRole of requiredRoles) {
if (this.roles.indexOf(requiredRole) > -1) {
granted = true;
break;
}
}
resolve(granted);
}
});
}
}
这是我的环境.ts
import { KeycloakConfig } from "keycloak-angular";
let keycloakConfig: KeycloakConfig = {
realm: "realm5",
url: "https://aaaaaa.net/auth",
clientId: "admin"
};
export const environment = {
production: false,
keycloak: keycloakConfig
};
在app-routing.module.ts
我导入AppAuthGuard
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { AppAuthGuard } from "./auth/auth.guard";
import { HomeComponent } from "./home/home.component";
import { UsersComponent } from "./users/users.component";
const routes: Routes = [
{ path: "admin-app/home", component: HomeComponent, canActivate:
[AppAuthGuard] },
{ path: "admin-app/users", component: UsersComponent, canActivate:
[AppAuthGuard] },
{ path: "admin-app", redirectTo: "admin-app/home", canActivate:
[AppAuthGuard] }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [AppAuthGuard]
})
export class AppRoutingModule {}
并在 app.module.ts
import { KeycloakAngularModule, KeycloakService } from "keycloak-angular";
const keycloakService = new KeycloakService();
@NgModule({
declarations: [AppComponent, HomeComponent, UsersComponent, NavComponent],
imports: [BrowserModule, AppRoutingModule, KeycloakAngularModule],
providers: [{
provide: KeycloakService,
useValue: keycloakService
}],
bootstrap: [AppComponent]
})
export class AppModule {ngDoBootstrap(app) {
keycloakService
.init()
.then(() => {
console.log("[ngDoBootstrap] bootstrap app");
app.bootstrap(AppComponent);
})
.catch(error => console.error("[ngDoBootstrap] init Keycloak failed", error));
}}
解决方案
您正在手动引导 Angular 应用程序,因此您必须:
从 NgModule 定义中删除 bootstrap: [Array] 。
将 entryComponents: [AppComponent] 添加到 NgModule 定义中。然后 keycloak Init 方法将在 AuthGuard 需要之前实际执行。
@NgModule({
declarations: [AppComponent, HomeComponent, UsersComponent, NavComponent],
imports: [BrowserModule, AppRoutingModule, KeycloakAngularModule],
providers: [{
provide: KeycloakService,
useValue: keycloakService
}],
entryComponents: [AppComponent]
})
推荐阅读
- java - OpenCV 4.5.2 VideoWriter 产生“找不到起始编号”错误
- c# - 如何在 C# 中使用 IQueryable 在动态查询中搜索日期
- java - setVisibility(View.GONE) 在 onCreate 上不起作用
- c# - 在 C#/.NET 中以编程方式更改 Windows 服务的恢复设置
- c++ - 指针作为结构成员
- java - 如何在 toast 的方法(java.)中获取活动上下文
- angular - 随着图例动态变化,Ng2 图表在移动视图中被破坏
- webrtc - 我可以在javascript中选择多个音频输出设备吗
- r - 如何使用 facet_wrap 在每个方面具有不同数字的离散类别之间创建相等的距离
- c# - 如何在 ASP.net 中登录到 DevTools 控制台