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

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

当您使用F5刷新页面时，它会重新加载页面，但没有信息，因为我使用存储中的信息，我不想在此处调用api或将信息存储在localstorage中

我想重定向的人谁刷新或试图通过直接的url访问我的第一页，其中有用户列表这个页面

---

我该怎么做呢？

在

/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;
  });
}

---

在

/编辑用户页面中

构造函数将代码放在下面。当您直接刷新或加载页面时，上一个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;
  });
}

---

这里刷新的问题是，您试图加载一个存储区中没有信息的页面

---

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

此处刷新的问题是，您试图加载存储中没有信息的页面

---

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

我找到的解决方案是测试构造函数中的选择器

如果构造器没有返回任何信息，它肯定我不是来自最后一个页面，但我试图通过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的建议。

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

如果构造器没有返回任何信息，它肯定我不是来自最后一个页面，但我试图通过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的建议。

问题是我使用此页面创建用户，因此如果信息不存在，这不是问题。问题是，信息不存在，我在编辑用户url上，而不是创建用户url。信息的含义并不重要。您可以创建其他“信息”。例如，如果您需要用户只能从特定位置进入页面，您可以设置某种标志并传递该信息，然后检查该信息是否存在。在任何情况下，这是我在看不到代码的情况下所能做的，最好是一个示例OK，感谢您的帮助：），我将尝试添加一个标志^^^问题是我使用此页面创建用户，因此如果信息不存在，这不是问题。问题是，信息不存在，我在编辑用户url上，而不是创建用户url。信息的含义并不重要。您可以创建其他“信息”。例如，如果您需要用户只能从特定位置进入页面，您可以设置某种标志并传递该信息，然后检查该信息是否存在。在任何情况下，这是我在看不到代码的情况下所能做的，最好是一个示例OK，感谢您的帮助：），我将尝试添加一个标志^^^它表示error:Property“filter”在类型“Observable”上不存在。它表示error:Property“filter”在类型“Observable”上不存在。