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

Question

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

路线 1： 它有一个数据网格，我在其中列出了我已经创建的所有学生校园，每一行都有一个导航到 "Route 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： 在导航 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 安全存在于您的后端。用户不应该能够获取、查看或操作不属于他们的数据，这必须由您的后端强制执行。

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

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

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

Answer 2

还有另一种方式，它在 Angular 文档本身中定义。

NavigationExtras

示例：

 let navigationExtras: NavigationExtras = {
        queryParams: {
            "firstname": "Nic",
            "lastname": "Raboy"
        }
    };
 this.router.navigate(["page2"], navigationExtras);

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

What is the safest and most effective approach when you need to pass data to another component through navigation in Angular8?

javascript

angular

angular-router