基于Keycloak的Angular应用刷新/登录后无限加载问题求助

我想在刷新Angular页面时保留当前路由（URL），所以修改了isAccessAllowed方法里的redirectUri，但出现了无限加载问题——浏览器URL在localhost:4200/students和带Keycloak授权参数的URL之间反复切换。如果不添加state.url，刷新后会回到首页，丢失当前页面。

原代码（isAccessAllowed方法） #

public async isAccessAllowed(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ) {
        // 未认证时强制用户登录
        if (!this.authenticated) {
            await this.keycloak.login({
                redirectUri: window.location.origin
            });
        }

        // 获取路由要求的角色
        const requiredRoles = route.data['roles'];

        // 无角色要求时允许访问
        if (!Array.isArray(requiredRoles) || requiredRoles.length === 0) {
            return true;
        }

        // 拥有所有要求角色时允许访问
        return requiredRoles.every((role) => this.roles.includes(role));
    }

修改后的关键代码 #

redirectUri: window.location.origin + state.url

AppModule中的Keycloak配置 #

export function kcFactory(kcService: KeycloakService) {
    return () => {
        kcService.init({
            config: {
                realm: "students",
                clientId: "studentsClient",
                url: "http://localhost:8080"
            },
            loadUserProfileAtStartUp: true,
            initOptions: {
                // onLoad: "check-sso",
                onLoad: "login-required",
                checkLoginIframe: true,
            },
        })
    }
}

版本信息 #

• Keycloak: 21.1.1
• keycloak-angular: 14.1.0
• keycloak-js: 22.0.1

1. 检查Keycloak客户端的有效重定向URI配置 #

登录Keycloak后台，找到studentsClient客户端，确保有效重定向URI设置为http://localhost:4200/*（允许所有子路径），而不是仅根路径。如果只配置根路径，带路由的redirectUri会被Keycloak拒绝，触发重定向循环。

2. 修正redirectUri的拼接逻辑 #

直接使用window.location.href获取完整当前URL，避免路径拼接错误：

redirectUri: window.location.href

或者用模板字符串确保路径拼接正确：

redirectUri: `${window.location.origin}${state.url}`

3. 调整Keycloak初始化参数 #

关闭checkLoginIframe，该iframe可能在路由变化时触发不必要的认证检查，导致循环：

initOptions: {
    onLoad: "login-required",
    checkLoginIframe: false,
}

4. 修正认证状态判断逻辑 #

改用KeycloakService提供的isLoggedIn()方法判断认证状态，避免this.authenticated状态更新不及时的问题：

if (!(await this.keycloak.isLoggedIn())) {
    await this.keycloak.login({
        redirectUri: `${window.location.origin}${state.url}`
    });
}

5. 确认回调路径未被拦截 #

确保Angular路由配置中，没有拦截Keycloak的默认回调路径（如/login-callback），让keycloak-angular能够正常处理认证回调并跳转到目标路由。

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