时间戳

首页 > 解决方案 > 当你需要在Angular8中通过导航将数据传递给另一个组件时，最安全和最有效的方法是什么？

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

问题描述

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

路线 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：共享服务和 BehaviorSubject 订阅数据。

    I owe you the code

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

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

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

在此先感谢，非常感谢所有帮助或贡献。

标签： javascriptangularangular-router

解决方案

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

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

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

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

推荐阅读