Как использовать олицетворение в приложении Vue.JS

Question

Я работаю над приложением с интерфейсом Vue.JS, в котором пользователь входит в систему и отправляется в список других пользователей. Также на этой странице есть еще одна вкладка со списком больниц (после щелчка вы перейдете на новую страницу со списком больниц).

Один из методов, который может выполнить вошедший в систему пользователь, когда на странице пользователя, - выбрать одного из пользователей для олицетворения. После того, как они подтвердили, что хотят выдать себя за этого пользователя, страница пользователя обновится, чтобы показать сетку со списком пользователей, доступ к которому имеет олицетворенный пользователь. Во время олицетворения они также должны иметь возможность переходить между вкладками (пользователи в больницы), продолжая олицетворение, поэтому теперь список больниц будет отображать список больниц, доступ к которым имеет олицетворенный пользователь. Чтобы подтвердить, что пользователь выдает себя за другого, на странице должно быть текстовое поле, показывающее, что «{Пользователь} теперь выдает себя за другого».

Я могу выполнить часть 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. Храните данные о персонализированных пользователях на сервере

   Эта реализация полностью зависит от стека вашего сервера. Большинство фреймворков предлагают сеанс или кэш, который вы можете использовать.