我目前正在开发一个基于用户身份验证的应用程序，每个用户都可以将学生校园注册为教师，目前，我正在使用一项功能，我有两条路线：
路线1：它有一个数据网格，我在其中列出了我已经创建的所有学生校园，每行都有一个导航到"路线 2"的编辑按钮，其目的是编辑已经创建的学生校园。
路线2：它有一个表单，其中包含创建学生校园的所有必要字段。
如您所见，我需要传递学生校园 ID 以在 ngOnInit 中获取数据以填充字段并能够编辑上述字段，因此我考虑了几个选项：
选项 1：在 URL 中传递 ID。
this.router.navigate(['planteles/registrar', idPlantel]);
https://myapplication/planteles/registrar/1
选项 2：使用 queryParams 在 URL 中传递 ID。
this.router.navigate(['planteles/registrar'], { queryParams: { ID: idPlantel } });
https://myapplication/planteles/registrar?ID=1
选项 3：在导航附加内容的状态对象中传递 ID。
this.router.navigate(['planteles/registrar'], { state: { id: idPlantel } });
选项 4：共享服务和行为订阅数据。
I owe you the code
我可以使用其中任何一个，但我对它们中的每一个都有问题。
我无法使用选项 1 和选项 2，因为教师无法更改 ID，因为这让他可以获取另一位教师的学生校园数据并进行编辑，因此不安全。 选项 3 和选项 4 的问题是当我刷新页面时状态丢失。
目前，我对选项 3 有一个解决方法，即如果状态未定义，则将用户重定向到上一页，但我不喜欢该解决方案。如果用户在不使用 LocalStorage 的情况下重新加载页面，我想保留数据。
提前感谢，非常感谢所有帮助或贡献。
选项1 在这里是正确的选项(以及您将在现实世界中找到大多数站点的实现方式......包括我们现在的这个(。问题在于您的 Web 安全方法，您需要修复的是您的后端。您正在接近 Web 安全，就好像前端安全是真实的，但事实并非如此。 Web 安全性存在于您的后端。 用户不应能够获取、查看或操作不属于他们的数据，这必须由后端强制执行。
这是如何工作的高级示例：应在用户登录时授予一些安全身份验证令牌，然后应将此身份验证令牌附加到每个请求。 然后，API 使用此令牌检查发出请求的用户，并确保他们具有适当的权限。如果没有(例如用户将其 URL 参数编辑为他们没有权限的某个 ID 的情况(或者没有令牌，API 应返回 401 或 403 响应，前端应适当处理它(即将它们发送回列表，或显示错误页面， 无论您决定什么(...如何颁发此令牌，使其安全并使用它是一个完全独立的主题，超出了本答案的范围。
在任何选项中，我都可以打开我的开发工具，查看正在发出的任何 API 请求，并更改 ID 并使用它来查看或操作其他人的数据，而无需任何努力。 因此，选项 3/4 几乎不比 1 或 2 更"安全"。因为如果没有正确实施后端安全性，这些都不是安全的。
前端"安全性"仅作为用户体验存在。我和你都使用相同的URL来查看这个页面，但我们看到了不同的选项和按钮，比如你可以编辑或删除你的帖子并接受答案，而我不能，但我可以编辑或删除我的答案等。 这不是出于真正的安全目的，SO的服务器强制执行谁可以和不能采取什么行动。它只是向我和你展示反映我们不同权限的 UI，即，它只是 UX。
还有另一种方式，这是在 Angular 文档中定义的。
导航附加功能
例：
let navigationExtras: NavigationExtras = {
queryParams: {
"firstname": "Nic",
"lastname": "Raboy"
}
};
this.router.navigate(["page2"], navigationExtras);