Использование nuxtServerInit с Feathers-Vuex.

Feathers-Vuex - это удобная библиотека, которая позволяет вам очень легко использовать ваши сервисы FeathersJS в Vue, как описано здесь.

Аутентификационные запросы в рамках nuxtServerInit метода жизненного цикла могут быть полезны для переноса в ваш магазин глобальных данных, не относящихся к маршруту / странице, то есть информации о пользователе. В библиотеке Feathers-Vuex есть удобная утилита для аутентификации пользователя из CookieStorage. После аутентификации вы можете отправлять свои запросы аутентифицированному пользователю.

Вместо того, чтобы использовать метод asyncData или fetch в контексте страницы или макета, это полезная альтернатива для получения некоторых исходных глобальных данных для гидратации вашего магазина.

Добавление информации о клиенте в настройку FeathersClient

Если вы обслуживаете несколько сайтов из одного экземпляра Nuxt, вам может потребоваться внести некоторые изменения в настройку nuxtServerInit. Когда сервер Nuxt делает запрос к вашему серверу FeathersJS, он не будет включать такие вещи, как имя хоста запрашивающего браузера. Это оказалось проблемой для меня, и вот решение, которое я придумал. Мне было бы очень интересно узнать, встречал ли кто-нибудь еще что-нибудь подобное и какое решение было для них.

Мне нужно было добавить запрашивающий hostname, чтобы я мог отправлять клиентские данные в Nuxt для гидратации магазина.

Я создаю два отдельных соединения, которые использовал socketio для браузера, а на сервере я использую REST. Это позволяет мне прикрепить запрашивающий hostname к axios. Я инициализирую плагины в контексте nuxtServerInit, чтобы они были настроены на REST клиентское соединение, и любые запросы, сделанные в любом контексте Nuxt, будь то asyncData или fetch страницы, они выполняются с новымREST соединением.

Чтобы аутентифицировать соединение сокета после инициализации браузера, я запускаю метод authenticate в методе created() жизненного цикла макета по умолчанию:

if (process.browser) {
  this.authenticate()
    .catch(_ => {})
}

Это будет аутентифицировать соединение сокета, если в CookieStorage существует существующий JWT токен, и все последующие запросы будут выполняться с аутентифицированным пользователем.

Надеюсь, это поможет, спасибо за чтение!