Angular Guard 只允许以前访问过的路由

Question

我正在制作一个步骤向导，并试图阻止用户导航到即将到来的页面路由，除非他们导航到这些步骤，但允许他们导航到之前的页面/步骤。

我目前的解决方案是为每个页面/步骤指定一个步骤编号，但它不允许导航到前面的步骤:

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree> | boolean {
  this.insuranceStepService.getCurrentStepNum().pipe(delay(100)).subscribe(stepNum => {
     switch(stepNum) {
        case 1:
           this.router.navigate([AppRoutes.StepA]);
           return true;
        break;
        case 2:
           this.router.navigate([AppRoutes.StepB]);
           return true;
        break;
        default:
           this.router.navigate([""]);
           return false;
        break;
     }
  });

  return true;
}

Answer 1

你能不能把状态保存在一个对象中。当访问/允许访问时，通过将 key 添加到状态来标记该步骤。

设置:

const stepState = {};

导航到新步骤时(或步骤验证时)

stepState.nextStep = true;

在导航处理程序中:

if(stepState[requestedStep]) {
    this.router.navigate([requestedStep]);
}