ASP.NET Core Angular SPA集成IdentityServer4 跳转Identity页返回应用重载如何配置

你遇到的重载属于IdentityServer4与SPA集成的默认行为：默认跳转逻辑会通过浏览器全地址跳转回到配置的redirect_uri，会绕过Angular的前端路由，触发整页资源重载。你可以通过修改两端配置自定义跳转逻辑，避免整页刷新。

调整步骤 #

1. 统一两端的回调路径配置 #

首先对齐IdentityServer服务端和Angular客户端的跳转回调地址，避免跳转时触发跨域或者地址不匹配导致的整页刷新。

• 服务端（ASP.NET Core IdentityServer4）客户端配置示例：

new Client
{
    ClientId = "angular_spa_client",
    ClientName = "Angular SPA应用",
    AllowedGrantTypes = GrantTypes.Code,
    RequirePkce = true,
    RequireClientSecret = false,
    // 统一回调地址，不要直接用根路径
    RedirectUris = { "https://你的SPA地址/auth-callback" },
    PostLogoutRedirectUris = { "https://你的SPA地址" },
    AllowedCorsOrigins = { "https://你的SPA地址" },
    AllowedScopes = new List<string>
    {
        IdentityServerConstants.StandardScopes.OpenId,
        IdentityServerConstants.StandardScopes.Profile,
        "自定义接口权限"
    },
    AllowOfflineAccess = true
}

• Angular端（以常用的angular-oauth2-oidc库为例）配置示例：

import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  issuer: 'https://你的IdentityServer地址',
  // 和服务端配置的回调地址完全一致
  redirectUri: window.location.origin + '/auth-callback',
  postLogoutRedirectUri: window.location.origin,
  clientId: 'angular_spa_client',
  responseType: 'code',
  scope: 'openid profile offline_access 自定义接口权限',
  useRefreshTokens: true,
  silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
  useSilentRefresh: true,
  // 关闭自动跳转时的页面重载触发逻辑
  disableAtHashCheck: false,
  showDebugInformation: false
}

2. 添加Angular回调路由处理 #

在Angular路由中新增/auth-callback路由对应的轻量组件，仅做身份凭证解析和路由跳转，不加载冗余资源，避免整页刷新：

// auth-callback.component.ts
import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { Router } from '@angular/router';

@Component({
  template: '<p>登录处理中...</p>'
})
export class AuthCallbackComponent implements OnInit {
  constructor(private oauthService: OAuthService, private router: Router) {}

  ngOnInit(): void {
    this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
      if (this.oauthService.hasValidAccessToken()) {
        // 跳转回用户之前访问的页面或者首页，走Angular前端路由，无整页重载
        const returnUrl = localStorage.getItem('returnUrl') || '/';
        localStorage.removeItem('returnUrl');
        this.router.navigateByUrl(returnUrl);
      }
    });
  }
}

3. 自定义Identity页面返回逻辑 #

如果是Identity自带的账户管理页返回触发的重载，可以重写Identity的账户管理页面模板，将返回链接改为携带当前SPA的returnUrl参数，返回时直接走前端路由跳转，而非全地址刷新。
如果使用浏览器返回按钮触发重载，可额外配置Angular路由复用策略，缓存应用状态，减少返回时的资源重新加载开销。

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