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

Question

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

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

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

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

设置：

const stepState = {};

导航到新步骤时（或步骤验证时）

stepState.nextStep = true;

在导航处理程序中：

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

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

Angular Guard to allow only previously visited routes

angular-routing

angular