Angular：已登录用户路由访问限制（密码过期强制修改场景）

对于刚接触Angular的开发者，这个需求可以通过路由守卫（CanActivate） + 状态管理服务来实现，以下是分步实现方案：

1. 创建用户状态服务 #

先做一个服务来存储和管理用户密码是否过期的状态，让守卫和组件都能读取、更新这个状态：

// user-status.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserStatusService {
  // 用BehaviorSubject保存密码过期状态，初始值设为false
  private passwordExpired$ = new BehaviorSubject<boolean>(false);

  // 暴露可观察对象，供外部订阅
  get isPasswordExpired() {
    return this.passwordExpired$.asObservable();
  }

  // 更新密码过期状态
  setPasswordExpired(status: boolean) {
    this.passwordExpired$.next(status);
  }
}

2. 实现路由守卫 #

创建PasswordExpiryGuard，用来拦截所有路由请求，判断用户是否需要强制修改密码：

// password-expiry.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
import { UserStatusService } from './user-status.service';
import { take } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class PasswordExpiryGuard implements CanActivate {
  constructor(
    private userStatusService: UserStatusService,
    private router: Router
  ) {}

  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
    // 获取当前密码过期状态（用take(1)只取一次最新值）
    const isExpired = await this.userStatusService.isPasswordExpired.pipe(take(1)).toPromise();

    // 如果密码过期
    if (isExpired) {
      // 当前路由已经是修改密码页面，允许访问
      if (route.routeConfig?.path === 'change-password') {
        return true;
      }
      // 否则重定向到修改密码页面
      this.router.navigate(['/change-password']);
      return false;
    }

    // 密码未过期，允许访问目标路由
    return true;
  }
}

3. 配置路由规则 #

在路由配置里，给所有需要保护的路由添加这个守卫，修改密码页面不需要加守卫（加了也没关系，守卫会自动放行）：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PasswordExpiryGuard } from './password-expiry.guard';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { ChangePasswordComponent } from './change-password/change-password.component';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [PasswordExpiryGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [PasswordExpiryGuard] },
  // 修改密码页面直接放行
  { path: 'change-password', component: ChangePasswordComponent },
  // 其他需要保护的路由都加上PasswordExpiryGuard
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

4. 触发密码过期状态 #

在登录接口返回密码过期结果时，调用状态服务更新标记：

// login.component.ts
import { Component } from '@angular/core';
import { UserStatusService } from '../user-status.service';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  constructor(
    private authService: AuthService,
    private userStatusService: UserStatusService,
    private router: Router
  ) {}

  login(username: string, password: string) {
    this.authService.login(username, password).subscribe(res => {
      if (res.passwordExpired) {
        // 标记密码过期
        this.userStatusService.setPasswordExpired(true);
        // 直接跳转到修改密码页面
        this.router.navigate(['/change-password']);
      } else {
        // 正常登录，重置状态并跳转到首页
        this.userStatusService.setPasswordExpired(false);
        this.router.navigate(['/']);
      }
    });
  }
}

5. 修改密码后的状态重置 #

用户成功修改密码后，记得把状态改回去，这样就能正常访问其他路由了：

// change-password.component.ts
import { Component } from '@angular/core';
import { UserStatusService } from '../user-status.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-change-password',
  templateUrl: './change-password.component.html'
})
export class ChangePasswordComponent {
  constructor(
    private userStatusService: UserStatusService,
    private router: Router
  ) {}

  changePassword(newPassword: string) {
    // 调用修改密码接口...
    // 接口成功后重置状态
    this.userStatusService.setPasswordExpired(false);
    // 跳转到首页
    this.router.navigate(['/']);
  }
}

关键说明 #

• 路由守卫会拦截所有路由跳转动作，包括地址栏手动输入URL的情况，刚好解决你说的无法跳转的问题。
• 用BehaviorSubject是因为它能保存当前状态，新订阅的组件能直接拿到最新值，适合这种需要实时判断的场景。
• 所有需要保护的路由都要加上canActivate: [PasswordExpiryGuard]，确保没有遗漏。

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