KeyCloak 在重定向时用单斜杠替换双斜杠

Question

我在客户端使用 Angular，并使用 KeyCloak 作为身份和访问管理解决方案。

我有一个受限制的路线，如下所示：

http://localhost:4200/path/to/component/(outlet1:A//outlet2:B)

当我想查看这条路线时，它将被重定向到 KeyCloak 来询问凭据，

redirect_uri

查询参数也已正确设置，到目前为止一切正常。 PROBLEM 是 KeyCloak 将我重定向回我的 Angular 应用程序，其中将我的 url (

//

) 中的

/

替换为

http://localhost:4200/path/to/component/(outlet1:A/outlet2:B)

，这在我的 Angular 路由上无效！在其他没有双斜线的路线中没有任何问题！

为什么KeyCloak要这么做？这是 KeyCloak 的Bug吗？

Answer 1

Keylock 中存在已知问题 (https://issues.redhat.com/browse/KEYCLOAK-14724)，但尚未提供修复。

解决方法是用自定义

UrlSerializer

替换默认的 Angular

UrlSerializer

，将双斜线

//

替换为管道

|

字符。

这是一个例子：

import {DefaultUrlSerializer, UrlSerializer, UrlTree} from '@angular/router';

/**
 * This service exists, because Keycloak eliminates double slash in the url on login/reroute,
 * Issue is known, see https://issues.redhat.com/browse/KEYCLOAK-14724
 *
 */
export class CustomUrlSerializer implements UrlSerializer {

  private defaultSerializer = new DefaultUrlSerializer();

  parse(url: string): UrlTree {
      url = url.replace("|", "//").replace("%7C", "//");
      return this.defaultSerializer.parse(url)
  }

  serialize(tree: UrlTree): string {
    let result = this.defaultSerializer.serialize(tree);
    result = result.replace("//", "|")
    return result;
  }
}

然后，不要忘记提供自定义序列化器：

  providers: [
    {
      provide: UrlSerializer,
      useClass: CustomUrlSerializer
    },
    ...
  ]