Angular 5中仅为特定路由初始化Keycloak的技术问询

Hey，我之前在Angular 5项目里刚好实现过一模一样的需求——默认加载公开页面，只有访问特定路由或者执行提交操作时才触发Keycloak登录。给你分享下具体的实现步骤和代码：

1. 调整Keycloak初始化配置 #

首先要修改Keycloak的初始化参数，默认的onLoad: 'login-required'会强制页面加载时就跳转到登录页，这不符合我们“默认公开”的需求。我们需要改成check-sso，它只会检查用户的登录状态，不会强制跳转；同时通过bearerExcludedUrls指定哪些路由不需要验证：

try {
  await keycloak.init({
    config: {
      url: 'http://localhost:8080/auth',
      realm: 'your-realm',
      clientId: 'client-id'
    },
    initOptions: {
      // 核心修改：仅检查登录状态，不强制初始登录
      onLoad: 'check-sso', 
      checkLoginIframe: false
    },
    // 排除公开路由，这些路径不会被Keycloak的Bearer拦截器处理
    bearerExcludedUrls: [ '/assets', '/clients/public', '/' ], 
  });
  resolve();
} catch (error) {
  console.error('Keycloak初始化失败', error);
  reject(error);
}

2. 实现路由守卫（Auth Guard） #

创建一个路由守卫，用来拦截需要验证的路由。当用户访问这些路由时，如果未登录，就触发Keycloak的登录流程：

import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private keycloakService: KeycloakService, private router: Router) {}

  async canActivate(): Promise<boolean | UrlTree> {
    // 检查用户是否已登录
    const isLoggedIn = await this.keycloakService.isLoggedIn();
    
    if (!isLoggedIn) {
      // 未登录则触发登录，登录成功后跳回原访问页面
      await this.keycloakService.login({
        redirectUri: window.location.href
      });
      return false;
    }

    return true;
  }
}

3. 配置路由规则 #

在路由配置中，给需要保护的路由（比如提交详情的路由）添加路由守卫，公开路由则不需要：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PublicComponent } from './public/public.component';
import { ProtectedDetailComponent } from './protected-detail/protected-detail.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: PublicComponent }, // 默认加载公开页面
  { path: 'public', component: PublicComponent }, // 公开路由，无需验证
  { 
    path: 'detail/submit', 
    component: ProtectedDetailComponent, 
    canActivate: [AuthGuard] // 提交详情的路由需要登录验证
  },
  // 其他需要保护的路由都可以按这个方式添加AuthGuard
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 组件内触发登录（可选） #

如果你的需求是用户点击“提交详情”按钮时才触发登录（而不是访问路由时），可以在组件的点击事件里手动检查登录状态：

import { Component } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html'
})
export class PublicComponent {

  constructor(private keycloakService: KeycloakService) {}

  async onSubmitDetail() {
    const isLoggedIn = await this.keycloakService.isLoggedIn();
    if (!isLoggedIn) {
      // 未登录则跳转登录，成功后回到提交页面
      await this.keycloakService.login({
        redirectUri: `${window.location.origin}/detail/submit`
      });
      return;
    }
    // 已登录，执行实际的提交逻辑
    this.performDetailSubmit();
  }

  private performDetailSubmit() {
    // 你的表单提交代码
  }
}

关键注意点 #

• check-sso是实现“默认公开”的核心，它只会静默检查登录状态，不会强制跳转
• bearerExcludedUrls要确保包含所有公开路由，避免这些路由被Keycloak的拦截器误拦截
• 登录成功后的redirectUri要设置正确，确保用户登录后能回到原来的操作页面

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