在 Angular 中，当使用 KeyCloak 进行身份验证和授权时，我们可以根据用户的角色来限制对某些路由的访问。如果一个用户未被授权访问某个路由，我们可以使用 Angular 的路由守卫来重定向到另一个路由。

以下是一个示例，在这个示例中，我们定义两个角色 admin 和 user，如果用户未被授权访问某个路由，我们将其重定向到 403 页面。

首先，我们需要创建一个 KeyCloakService 来初始化 KeyCloak，并获取用户的角色：

import { Injectable } from '@angular/core'; import * as Keycloak from 'keycloak-js';

@Injectable({ providedIn: 'root' }) export class KeycloakService {

public keycloakAuth: any;

constructor() { }

init(): Promise { return new Promise((resolve, reject) => { const config = { 'url': 'http://localhost:8080/auth', 'realm': 'demo', 'clientId': 'web-app', 'credentials': { 'secret': '40ce302f-10f7-4a29-bf54-0ec14961ef00' } };

  this.keycloakAuth = new Keycloak(config);

  this.keycloakAuth.init({ onLoad: 'login-required' })
    .success(() => {
      resolve();
    })
    .error(() => {
      reject();
    });
});

}

getUserRoles(): string[] { const roles: string[] = []; const token = this.keycloakAuth.tokenParsed; if (token && token.realm_access && token.realm_access.roles) { roles.push(...token.realm_access.roles); } return roles; } }

在这个服务中，我们创建了一个名为 keycloakAuth 的 KeyCloak 实例，并初始化它。我们还实现了一个名为 getUserRoles 的方法，该方法将返回一个字符串数组，该数组包含当前用户的角色。

接下来，我们可以在路