时间戳

首页 > 解决方案 > 单击路由器时防止重定向到组件

angular - 单击路由器时防止重定向到组件

问题描述

我有两个组件：

学期计划：

onSubmit(student: Student) {
  this.studentService.postStudent(student).subscribe((s) => {
    this.router.navigate(['home-page/semester-planning/classes-planning/' + s.id]);
  });
}

还有从学期计划重定向而来的课程计划，它通过 id 获取学生，然后显示信息：

 ngOnInit(): void {


  this.studentId = this.route.snapshot.paramMap.get('id');
  }

  ngAfterViewInit(): void {
    this.getStudent().subscribe(student => {
      this.dateProcessed = this.processDate(student.startDate, student.endDate);
    })
  }

  getStudent(): Observable<Student> {
    return this.studentService.getStudent(this.studentId);
  }

这是两个组件的路由器：

  {
    path: 'semester-planning',
    component: SemesterPlanningComponent,
    canActivate: [AuthGuard, StudentGuard],
  },
  {
    path: 'semester-planning/classes-planning/:id',
    component: ClassesPlanningComponent,
    canActivate: [AuthGuard],
  }

这很好用，除非用户已经导航到课程计划并单击进入学期计划，并且尽管已经提交了数据，但他们再次被重定向到该页面。

如果用户已经提交了数据并导航到课程计划，我想防止重定向到学期计划。我尝试在下面创建学生警卫，但不知道如何检查学生是否已经提交了数据（导航到课程计划）。使用 localStorage 没问题，但如果用户切换浏览器，那么它将不再工作。

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
  if (
    // check if the student submitted the data?
  )   {
    this.router.navigate(['home-page/semester-planning/classes-planning/']);
    return false;
  }
  return true;
}

与服务器交互的学生服务代码（如果方便的话）：

getStudent(id: String): Observable<Student> {
    const student = this.http.get<Student>(environment.baseUrl + "/api/student/" + id);
    return student;
  }

  postStudent(student: Student): Observable<any> {
    return this.http.post(environment.baseUrl + "/api/student", student);
  }

我真的很感激一些帮助。

标签： angular

解决方案

当应用程序重新加载或直接从 URL 访问时，Angular 不会保存统计信息，这就是为什么您必须在<a>标签上使用 routerlink 属性来导航的原因。不知道你用的是routerlink还是href。这不是实际问题，但正如您所说，您可以使用 localStorage 或者您可以在后端进行验证（更好）。我不知道您所说的“使用 localStorage 可以，但如果用户切换浏览器，那么它将不再工作”是什么意思。如果您想将此类信息保存在不同的浏览器中，则必须将其保存在数据库中。

这个 Youtube 视频可以帮助你了解如何在 Angular 应用Angular 6 教程 19：持久登录会话中持久化数据

推荐阅读