JWT刷新令牌与拦截器机制疑问：自动登录跳过“记住我”问题求助

你的核心问题是**“记住我”开关未与令牌的持久化逻辑绑定**，且缺少应用启动时的身份合法性校验，导致无论用户是否勾选“记住我”，关闭浏览器后重新打开都能通过本地存储的令牌直接访问权限页面。结合你的Angular+GraphQL场景，给出以下针对性解决步骤：

一、绑定“记住我”与令牌存储策略 #

登录时根据用户是否勾选“记住我”，选择不同的存储介质：

• 勾选：用localStorage持久化存储（浏览器关闭后数据保留）
• 未勾选：用sessionStorage会话级存储（浏览器关闭后自动清空）

修改你的AuthService登录与令牌获取逻辑：

// AuthService.ts
login(credentials: { username: string; password: string; rememberMe: boolean }) {
  return this.apollo.mutate({
    mutation: LOGIN_MUTATION,
    variables: credentials
  }).pipe(
    tap(({ data }) => {
      const { accessToken, refreshToken } = data.login;
      // 根据记住我选择存储介质
      const storage = credentials.rememberMe ? localStorage : sessionStorage;
      storage.setItem('access_token', accessToken);
      storage.setItem('refresh_token', refreshToken);
    })
  );
}

getToken(isRefreshToken = false): string | null {
  // 优先从sessionStorage取（未记住我），没有再取localStorage（记住我）
  const sessionKey = isRefreshToken ? 'refresh_token' : 'access_token';
  const sessionToken = sessionStorage.getItem(sessionKey);
  if (sessionToken) return sessionToken;
  
  const localToken = localStorage.getItem(sessionKey);
  return localToken;
}

// 新增：判断是否处于记住我状态
isRemembered(): boolean {
  return localStorage.getItem('access_token') !== null && sessionStorage.getItem('access_token') === null;
}

二、修复拦截器的刷新逻辑，避免无限循环 #

当前拦截器遇到401时直接触发刷新，但如果刷新令牌本身已过期，会导致无限请求循环。需增加判断：若当前请求是刷新令牌接口，遇到401直接引导登录；刷新失败时也立即跳转登录页。

修改拦截器的catchError部分：

catchError((err: any) => {
  if (err instanceof HttpErrorResponse) {
    switch (err.status) {
      case 401:
        // 当前是刷新令牌请求，直接退出登录
        if (isRefresherToken) {
          authService.logout();
          inject(Router).navigate(['/login']);
          return throwError(() => err);
        }
        // 尝试刷新令牌，失败则跳转登录
        return authService.refreshToken().pipe(
          switchMap(() => {
            const jwtToken = authService.getToken();
            const newCloned = req.clone({
              setHeaders: { Authorization: `Bearer ${jwtToken}` }
            });
            return next(newCloned);
          }),
          catchError(() => {
            authService.logout();
            inject(Router).navigate(['/login']);
            return throwError(() => err);
          })
        );
    }
  }
  return throwError(() => err);
})

三、添加路由守卫，校验页面访问权限 #

给需要权限的页面添加路由守卫，在进入页面时校验令牌有效性：

• 有有效访问令牌：允许进入
• 无访问令牌但有刷新令牌：尝试刷新获取新令牌
• 无任何有效令牌：引导到登录页

// auth.guard.ts
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    const accessToken = this.authService.getToken();
    
    // 检查访问令牌是否存在且未过期
    if (accessToken && !this.authService.isTokenExpired(accessToken)) {
      return of(true);
    }

    // 尝试用刷新令牌获取新的访问令牌
    const refreshToken = this.authService.getToken(true);
    if (refreshToken) {
      return this.authService.refreshToken().pipe(
        map(() => true),
        catchError(() => {
          this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
          return of(false);
        })
      );
    }

    // 无有效令牌，跳转登录页
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return of(false);
  }
}

在路由配置中使用守卫：

// app-routing.module.ts
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  // 其他权限路由配置...
];

四、完善登出逻辑 #

登出时清空所有存储的令牌：

// AuthService.ts
logout() {
  localStorage.removeItem('access_token');
  localStorage.removeItem('refresh_token');
  sessionStorage.removeItem('access_token');
  sessionStorage.removeItem('refresh_token');
  this.router.navigate(['/login']);
}

核心逻辑总结 #

1. “记住我”的本质是存储介质选择：通过localStorage和sessionStorage的特性区分持久化与会话级登录状态
2. 启动/路由跳转时的校验：避免直接使用本地存储的过期令牌，确保身份合法性
3. 拦截器边界处理：防止刷新令牌过期导致的无限循环，及时引导用户重新登录

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