1

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

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

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

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

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

4

2 回答 2

0

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

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

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

    使用vue-cookie

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

    在页面加载时检查您是否在模拟用户：

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

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

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

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