我如何在Vue.JS应用中使用模拟功能

Question

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

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

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

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

有人在Vue.JS项目中使用模拟吗？如果用户在页面之间进行切换，您如何确保“ isUserImpersonated”保持不变，您是否有任何提示或想法？

Answer 1

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

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

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

   使用vue-cookie

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

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

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

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

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