如何在 Vue.JS 应用程序中使用模拟

Posted 2023-02-23

【中文标题】如何在 Vue.JS 应用程序中使用模拟

【英文标题】：How do I use impersonation within a Vue.JS app

【发布时间】：2020-02-05 04:28:39

【问题描述】：

我正在开发一个带有 Vue.JS 前端的应用程序，用户登录并被发送到其他用户列表。同样在此页面上，还有一个用于医院列表的选项卡（单击后，它将带您进入包含医院列表的新页面）。

登录用户在用户页面上可以执行的一种方法是选择要模拟的用户之一。一旦他们确认要模拟此用户，用户页面就会刷新以显示模拟用户有权查看的用户列表网格。在模拟时，他们还应该能够在选项卡（用户到医院）之间切换，继续模拟，所以现在医院列表将呈现被模拟用户有权查看的医院列表。为了确认正在模拟用户，页面上应该有一个文本框显示“User 现在被模拟了”。

我可以执行第 1 部分，在用户页面上模拟用户，但是一旦我单击医院，存储为“isUserImpersonated”的数据就会刷新（一旦创建模拟，isUserImpersonated 就会从 false 切换为 true。当我刷新一个页面，isUserImpersonated 会切换回 false）。如何让每个页面的数据保持不变，而不是在呈现新路径后刷新（localhost:8080/users -> localhost:8080/hospitals？

我在查看文档后尝试使用 EventBus，这似乎可行，但是一旦您呈现新页面，数据将不会保持不变。

有人在 Vue.JS 项目中使用过模拟吗？如果用户在页面之间切换，您对我可以做些什么来确保“isUserImpersonated”保持不变有任何提示或想法吗？

【参考方案1】：

首先，这不起作用的原因是您所做的更改存储在内存中，当您导航到新页面时它会被删除。

为了完成这项工作，您需要使用某种持久性存储。您有两种选择：

使用 cookie 存储和加载模拟用户数据

使用vue-cookie

this.$cookie.set('impersonation',  ... store whatever data you need , 1);

在页面加载时检查您是否在冒充用户：

mounted() 
  this.impersonation = this.$cookie.get('impersonation');

将模拟的用户数据存储在服务器上

此实现完全取决于您的服务器堆栈。大多数框架都提供您可以利用的会话或缓存。

【讨论】：

谢谢你，这很有帮助。通过这个过程，在我模拟用户的方法中，我调用了一个 API，其响应包括“impersonated_as”，它成为被模拟用户的电子邮件。我可以以某种方式使用这些存储的信息吗？

是的，听起来这就是您想要存储的内容。在我的回答中查看我所说的 ... store whatever data you need。您可以在此处替换您从服务器收到的电子邮件地址。

【参考方案2】：

使用 Vuex 进行状态管理 我正在对上面文斯的回答进行一些扩展。 首先，是的，我已经成功地在 Vue 应用程序中使用了模拟。随着您的应用程序扩展，这很可能是因为您正在与医院合作（不确定这是用于学校项目还是现实世界的东西），您将从多个位置访问和改变状态。 Vuex 使您能够将状态与视图分离，并允许通过操作进行突变。我强烈建议至少调查一下。