Angular 9 - 路由 - 堆栈历史（清除）答案

【问题标题】：Angular 9 - Routing - Stack History (Clear)Angular 9 - 路由 - 堆栈历史（清除）
【发布时间】：2020-09-10 10:37:56
【问题描述】：

是否可以使用 Angular 9 路由来管理如下所述的场景？

共有三个页面（A、B 和 C）。用户进入页面A（这是一个注册页面），然后他插入注册数据，然后他进入第二个页面（B），他必须在其中插入一个确认码。我希望用户可以从此页面前进（页面 C）并清除历史记录（页面 a 和 b 无法通过返回功能访问），但他可以返回页面 A。这可能吗？

A -> B -> C [在 C 中时，A e B 不再可用] A -> B -> A [在B，我可以回到A]

提前致谢。

【问题讨论】：

在用户进入页面 C 后，通过直接在浏览器的地址栏输入 url 是否应该无法访问这些页面？
这是一个离子应用......不
这能回答你的问题吗？ Angular 5: remove route history 和另外一个 similar question 特定于 Ionic 具有相同的答案
根据您的要求，您可以使用skipLocationChange 或replaceUrl：angular.io/api/router/NavigationExtras#replaceUrl
您能否创建一个 StackBlitz 以便我们可以开始做一些事情？

【解决方案1】：

有多种方法可以做到这一点。下面提到其中两个：

就个人而言，我更喜欢第二个。为此：

1) 使用您喜欢的名称生成服务。

2）在服务中，创建一个主题来存储我们的路线数据（isAllowed）（初始设置为true）。

3) 在您的页面B 中将其作为构造函数中的私有类变量以及用于路由的路由器访问。

constructor(private service: ServiceName, private router: Router) {}

4) 通过订阅isAllowed subject 来检查isAllowed 的值是否为真。如果没有，请路由到首选组件。

this.service.isAllowed.subscribe({isAllowed} => {
  isAllowed ? this.router.navigate("component path here") : false
})

【讨论】：