javascript - 当您需要通过 Angular8 中的导航将数据传递给另一个组件时，最安全和最有效的方法是什么？

Question

我目前正在开发一个基于用户身份验证的应用程序，其中每个用户都可以将学生校园注册为教师，目前，我正在使用一条有两条路线的功能:

路线 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:在 navigation extras 的状态对象中传递 ID。

    this.router.navigate(['planteles/registrar'], { state: { id: idPlantel } });

选项 4:共享服务和 BehaviorSubject 以订阅数据。

    I owe you the code

我可以使用这些中的任何一个，但我对它们中的每一个都有问题。

我不能使用选项 1 和选项 2，因为老师不能更改 ID，因为这使他有可能获取另一位老师的学生校园数据并进行编辑，因此不安全。 选项 3 和选项 4 的问题是当我刷新页面时状态丢失。

目前，我有一个选项 3 的解决方法，即在状态未定义时将用户重定向到上一页，但我不喜欢该解决方案。如果用户在不使用 LocalStorage 的情况下重新加载页面，我想保留数据。

提前致谢，非常感谢所有帮助或贡献。

Answer 1

选项 1 是此处的正确选项(您会发现现实世界中大多数网站的实现方式......包括我们现在使用的这个)。问题在于您的网络安全方法，而您需要修复的是您的后端。您正在接近 Web 安全，就好像前端安全是真实的一样，但事实并非如此。 Web 安全存在于您的后端。用户不应该能够获取、查看或操作不属于他们的数据，这必须由您的后端强制执行。

这是一个如何工作的高级示例:当用户登录时应该授予一些安全的身份验证 token ，然后这个身份验证 token 应该附加到每个请求。 API 然后使用此 token 来检查哪个用户正在发出请求并确保他们具有适当的权限。如果他们不这样做(例如用户将他们的 URL 参数编辑为他们没有权限的某个 ID)或者如果没有 token ，API 应该返回 401 或 403 响应并且前端应该适本地处理它(即将它们发送回列表，或显示错误页面，无论您决定如何)......如何发布此 token ，使其安全并使用它是一个完全独立的主题，超出了本答案的范围。

在任何选项中，我都可以打开我的开发工具，查看任何正在发出的 API 请求，更改 ID 并使用它来查看或操作其他人的数据，而无需任何努力。因此选项 3/4 仅比选项 1 或选项 2 更“安全”。因为如果没有正确实现后端安全性，这些都不安全。

前端“安全”仅作为用户体验而存在。我和你都使用相同的 URL 查看此页面，但我们看到不同的选项和按钮，比如你可以编辑或删除你的帖子并接受答案，而我不能，但我可以编辑或删除我的答案等。这不是出于真正的安全目的，SO 的服务器强制执行谁可以和不能采取什么操作。它只是向我和你展示反射(reflect)我们不同权限的 UI，即，它只是 UX。