Angular13中angular-oauth2-oidc认证后跳转原路由的问题

你的问题核心在于当前代码获取路由快照的时机不对，且未正确利用路由拦截机制持久化初始访问URL。以下是可行的解决方案：

问题分析 #

• activeRoute.snapshot.url在initAuth执行时，可能尚未捕获到用户最初访问的完整路由（比如在APP_INITIALIZER中调用initAuth时，路由还未完成解析）。
• 直接在initAuth中保存路由快照，无法应对页面刷新或授权服务器跳转回来时的路由状态丢失。

解决方案步骤 #

1. 实现路由守卫拦截未认证请求，保存目标URL #

创建AuthGuard拦截需要认证的路由，在用户未登录时保存当前目标路由到本地存储：

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable, map } from 'rxjs';
import { InitialAuthService } from './initial-auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: InitialAuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    return this.authService.isLogin().pipe(
      map(isLoggedIn => {
        if (isLoggedIn) {
          return true;
        }
        // 保存用户原本要访问的完整URL（含查询参数）
        localStorage.setItem('redirectUrl', state.url);
        // 触发认证流程
        this.authService.initAuth().catch(() => {});
        return false;
      })
    );
  }
}

2. 修改InitialAuthService，认证成功后跳转回保存的URL #

调整token_received事件的处理逻辑，读取本地存储中的跳转URL并导航：

// 替换原有的token_received事件订阅
this.oauthService.events
  .pipe(filter((e: OAuthEvent) => e.type === "token_received"))
  .subscribe(() => {
    console.debug("token_received");
    this.handleNewToken();
    // 读取保存的跳转URL，默认跳转到首页
    const redirectUrl = localStorage.getItem('redirectUrl') || '/';
    // 清除保存的URL，避免重复跳转
    localStorage.removeItem('redirectUrl');
    // 导航到目标路由
    this.router.navigateByUrl(redirectUrl);
  });

3. 优化initAuth方法中的认证触发逻辑 #

移除initAuth中直接调用initImplicitFlow()的硬编码，改为由路由守卫触发，同时处理直接打开认证后页面的场景：

async initAuth(): Promise<any> {
  return new Promise<void>((resolveFn, rejectFn) => {
    this.oauthService.configure(this.authConfig);
    this.oauthService.setStorage(localStorage);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();

    // 保留其他事件订阅（token_expires、token_error等）...

    this.oauthService.loadDiscoveryDocumentAndLogin().then(
      (isLoggedIn) => {
        if (isLoggedIn) {
          this.handleNewToken();
          // 若用户直接打开认证后的页面，检查是否有跳转URL
          const redirectUrl = localStorage.getItem('redirectUrl') || '/';
          localStorage.removeItem('redirectUrl');
          this.router.navigateByUrl(redirectUrl);
          resolveFn();
        } else {
          // 不再主动触发认证，由路由守卫统一处理
          rejectFn();
        }
      },
      (error: { status: number; }) => {
        console.log({ error });
        if (error.status === 400) {
          location.reload();
        }
        rejectFn();
      }
    );
  });
}

4. 在路由配置中添加守卫 #

更新路由配置，为需要认证的路由添加canActivate: [AuthGuard]：

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  // 其他路由配置...
];

关键说明 #

• RouterStateSnapshot.url能获取用户完整的初始访问URL（包括查询参数），比activeRoute.snapshot.url更可靠。
• 通过本地存储持久化跳转URL，可应对页面刷新或授权服务器跳转回来的场景。
• 路由守卫的方式更符合Angular路由拦截机制，避免在初始化服务中处理路由状态的问题。

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