Keycloak结合Angular AuthGuard登录后跳转目标页面异常问题咨询

问题根因 #

Keycloak授权登录成功后触发的重定向会导致Angular应用全量重载，你最初访问的目标路由没有被缓存，加上返回的URL携带OIDC专属的state、code哈希参数，路由匹配失败就停在了根路径，因此只会渲染AppComponent。

标准修复方案 #

步骤1：触发Keycloak初始化前缓存目标路由 #

修改AuthGuardService，在调用Keycloak初始化之前把用户要访问的原始路径存到本地会话存储中：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
  if (KeycloakService.auth.loggedIn) {
    return true;
  } else {
    // 缓存原始访问路径
    sessionStorage.setItem('redirectAfterLogin', state.url);
    return KeycloakService.init();
  }
}

步骤2：Keycloak登录成功后执行路由跳转 #

修改KeycloakService的init方法，登录成功回调里读取缓存的路径，跳转后清除缓存：

static init(): Promise<any> {
  let keycloakAuth: any = new Keycloak('keycloak.json');
  KeycloakService.auth.loggedIn = false;

  return new Promise((resolve, reject) => {
    keycloakAuth.init({ onLoad: 'login-required' })
      .success(() => {
        KeycloakService.auth.loggedIn = true;
        KeycloakService.auth.authz = keycloakAuth;
        KeycloakService.auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/demo/protocol/openid-connect/logout?redirect_uri=/angular2-product/index.html";
        // 新增登录成功后跳转逻辑
        const redirectUrl = sessionStorage.getItem('redirectAfterLogin');
        if (redirectUrl) {
          sessionStorage.removeItem('redirectAfterLogin');
          // 清除Keycloak返回的授权参数，避免干扰路由匹配
          window.location.hash = '';
          window.location.href = redirectUrl;
        }
        resolve(true);
      })
      .error(() => {
        reject(false);
      });
  });
}

可选优化：路由配置添加参数兼容规则 #

如果项目使用Angular的HashLocationStrategy，可以在路由配置里添加参数兼容规则，避免Keycloak的临时参数干扰路由匹配：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always',
    onSameUrlNavigation: 'reload'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

内容的提问来源于stack exchange，提问作者marcg