刷新后的角度重定向，并通过直接url阻止访问

Question

在我的网站上，您可以管理用户列表，当您单击“编辑”时，它会将您重定向到/ edit-user页面，在该页面中，信息以表格的形式预先加载。

[当您使用F5刷新页面时，它会重新加载页面，但没有信息，因为我使用的是我商店中的信息，并且我不想在这里调用我的api或将信息存储在localstorage中。

我希望重定向的人刷新或尝试通过第一页上有用户列表的直接URL来访问此页面。

我该怎么做？

Answer 1

在/edit-user page构造函数中，将以下代码放入。直接刷新或加载页面时，以前的URL将不可用。因此，如果先前的URL不可用或不是用户列表，请重定向。

previousUrl: string;

constructor(router: Router) {
  router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(e => {
    console.log('prev:', this.previousUrl);
    // if previous URL is empty or other than user list then redirect to your first page
    this.previousUrl = e.url;
  });
}

Answer 2

这里的刷新问题是，您试图加载商店中没有信息的页面。

因此，我建议您检查是否不存在该信息（未定义或任何其他信息），以便在用户认为合适的情况下重定向用户或阻止访问。

Answer 3

我发现的解决方案是测试我在构造函数中使用的选择器。

如果构造函数不返回任何信息，则确保我不是来自最后一页，但是我尝试通过F5刷新或通过直接URL访问该页面。

      this.fetchUsersSubscription = this.route.paramMap
      .pipe(
        switchMap((params: ParamMap) => {
          this.userId = Number(params.get('userId'));
          return merge(
            this.usersSelector.getUsers().pipe(
              map((users: User[]) => {
                if (users) {
                  // do what you want
                  });
                } else {
                  this.router.navigate(['your url'])
                  // this block the refresh or the direct url access via rerouting
                }
              })
            )
          );
        })
      )
      .subscribe();

这个想法来自Javid Askerov和Soham的建议。