Angular应用中angular-oauth2-oidc与IdentityServer3的Token自动刷新跳转问题

这个问题我之前处理过，核心原因是默认的Token刷新流程没有保留你当前的路由状态，直接跳回了配置的redirectUri。结合你的哈希路由场景，给你两个解决方案，优先选第一个，因为它完全不会打断用户操作：

方案一：启用静默刷新（Silent Refresh）最优解 #

angular-oauth2-oidc支持通过iframe静默刷新Token，全程不会触发页面跳转，完美解决编辑时被打断的问题。步骤如下：

1. 添加静默刷新回调页面
   在你的Angular项目的assets目录下创建一个silent-refresh.html文件，内容很简单：

<!DOCTYPE html>
<html>
<body>
  <script>
    // 通知主应用静默刷新完成
    window.opener.postMessage({ type: 'silentRefreshComplete' }, window.location.origin);
    window.close();
  </script>
</body>
</html>

2. 配置OAuthService启用静默刷新
   修改你的Auth服务配置，添加静默刷新相关参数：

import { OAuthService } from 'angular-oauth2-oidc';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private oauthService: OAuthService) {
    this.initOAuth();
  }

  private initOAuth() {
    this.oauthService.configure({
      issuer: 'https://你的IdentityServer地址',
      clientId: '你的客户端ID',
      redirectUri: window.location.origin + '/', // 保持原有的redirectUri
      silentRefreshRedirectUri: window.location.origin + '/assets/silent-refresh.html', // 刚才创建的页面地址
      scope: 'openid profile email', // 根据你的需求调整权限
      responseType: 'id_token token',
      useSilentRefresh: true, // 开启静默刷新
      silentRefreshTimeout: 5000, // 可选，超时时间
      sessionChecksEnabled: true,
    });

    // 启动自动静默刷新
    this.oauthService.setupAutomaticSilentRefresh();
    
    // 初始化登录流程如果需要的话
    this.oauthService.loadDiscoveryDocumentAndLogin().then(() => {
      // 其他初始化逻辑
    });
  }
}

3. 更新IdentityServer3客户端配置
   登录你的IdentityServer3管理后台，找到对应的客户端，把silentRefreshRedirectUri（也就是https://你的应用地址/assets/silent-refresh.html）添加到Allowed Redirect Uris列表里，否则会被IdentityServer拒绝回调。

这样配置后，Token刷新会在后台iframe中完成，用户完全感知不到，编辑详情页时再也不会被强制跳转了。

方案二：重定向刷新时保存并恢复路由如果静默刷新不可用 #

如果因为浏览器限制比如第三方Cookie禁用导致静默刷新失败，你可以通过state参数保存当前路由，刷新完成后自动导航回去：

1. 自定义Token刷新逻辑，保存当前路由
   修改Auth服务，在触发刷新前把当前哈希路由存入state参数：

import { OAuthService } from 'angular-oauth2-oidc';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private oauthService: OAuthService, private router: Router) {
    this.initOAuth();
    this.handlePostRefreshRedirect();
  }

  private initOAuth() {
    this.oauthService.configure({
      issuer: 'https://你的IdentityServer地址',
      clientId: '你的客户端ID',
      redirectUri: window.location.origin + '/',
      scope: 'openid profile email',
      responseType: 'id_token token',
    });
  }

  // 自定义刷新方法，保存当前路由到state
  refreshToken() {
    const currentRoute = this.router.url; // 获取当前路由比如 /detailView/id123456
    // 更新配置，把当前路由作为state传递
    this.oauthService.configure({
      ...this.oauthService.configuration,
      state: currentRoute,
    });
    // 触发刷新
    return this.oauthService.refreshToken();
  }

  // 处理刷新后的路由恢复
  private handlePostRefreshRedirect() {
    this.oauthService.loadDiscoveryDocumentAndLogin().then(() => {
      const savedRoute = this.oauthService.state;
      // 如果有保存的路由且不是首页，导航回去
      if (savedRoute && savedRoute !== '/') {
        this.router.navigateByUrl(savedRoute);
      }
    });
  }
}

2. 替换默认自动刷新为自定义逻辑
   如果你之前用的是setupAutomaticSilentRefresh()，现在需要换成自己的定时刷新逻辑，比如：

// 在AuthService的initOAuth方法里
setInterval(() => {
  const tokenExpiresIn = this.oauthService.getAccessTokenExpiration() - Date.now();
  // 提前5分钟刷新
  if (tokenExpiresIn < 5 * 60 * 1000) {
    this.refreshToken();
  }
}, 60 * 1000); // 每分钟检查一次

这样配置后，即使刷新时触发了页面重定向，回调回来后也会自动跳回之前的详情页，不会打断用户的编辑操作。

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