Angular 14浏览器返回按钮问题：如何屏蔽角色选择弹窗路由？

方案一：替换浏览器历史记录条目 #

在用户选择角色后跳转到首页时，使用replaceUrl配置项替换当前的select-role历史记录，这样浏览器历史栈中不会保留该路由，后续点击返回按钮会直接回到首页之前的有效记录，而非角色选择页。

修改导航代码如下：

this.router.navigateByUrl(AppConstants.SCREEN_ROUTES.HOME, { replaceUrl: true })
  .then(success => this.loaderService.hide())
  .catch(err => this.loaderService.hide());

方案二：添加路由守卫拦截角色选择页访问 #

创建路由守卫，当用户已经选择过角色时，阻止进入select-role路由并自动跳转到首页。这种方式即使历史栈中存在select-role，也不会触发弹窗显示。

1. 创建守卫服务：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
// 假设你有存储角色状态的服务，比如AuthService
import { AuthService } from './path/to/auth.service';

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

  canActivate(): boolean {
    // 检查用户是否已选择角色（根据实际存储方式调整逻辑）
    const hasSelectedRole = this.authService.getRole() !== null;
    
    if (hasSelectedRole) {
      this.router.navigate(['/home']);
      return false;
    }
    return true;
  }
}

2. 在路由配置中应用守卫：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SelectRoleComponent } from './select-role/select-role.component';
import { HomeComponent } from './home/home.component';
import { SelectRoleGuard } from './path/to/select-role.guard';

const routes: Routes = [
  { 
    path: 'select-role', 
    component: SelectRoleComponent,
    canActivate: [SelectRoleGuard] // 添加守卫
  },
  { path: 'home', component: HomeComponent },
  // 其他路由配置
];

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

方案三：调整初始路由逻辑（适合重构场景） #

将首页设为默认路由，在首页组件初始化时检查用户是否已选择角色：

• 如果未选择，跳转到select-role；
• 如果已选择，正常加载首页内容。

这样select-role是从首页跳转而来，用户选完角色返回首页后，历史栈中首页在select-role之前，点击返回按钮会回到首页而非角色选择页。

修改首页组件代码：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './path/to/auth.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(
    private router: Router,
    private authService: AuthService
  ) {}

  ngOnInit(): void {
    if (!this.authService.hasSelectedRole()) {
      this.router.navigate(['/select-role']);
    }
  }
}

同时调整路由配置，将首页设为默认路由：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'select-role', component: SelectRoleComponent },
  { path: 'home', component: HomeComponent },
  // 其他路由
];

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