Где принято размещать функции проверки наличия авторизации пользователя в приложении при его старте, на примере vue cli?

Question

[Nayob]

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

Answer 1

[Arsync]

В навигационных хуках роутера (vue-router). Любая навигация по приложению, включая начальную страницу, проходит через роутер (если он используется). И там есть beforeEach((to, from, next) => {}), который можно сделать асинхронным. Этот хук способен блокировать открытие целевой страницы. Если маршрут не авторизован, вызываешь next с указанием вместо запрошенного пути страницы входа. Более того, раз уж речь зашла об авторизации, на путь в конфигурации роутера можно добавить meta: { myFieldName: "admin" } и затем понять, какая роль требуется указанному маршруту. Для этого в цикле нужно перебрать все части to.matched и посмотреть, есть ли среди них та, у которой указана meta с заполненным myFieldName.

Под это дело даже официальный пример есть, хоть он и написан для проверки успешной аутентификации пользователя.

Comments

[Nayob]

Я сразу пошел по этому пути:

router.beforeEach(async (to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    await store.dispatch('checkSession');
    if (store.getters.isAuthenticated) {
      next();
    } else {
      next({
        path: '/login',
      });
    }
  } else {
    next();
  }
});

Но мне нужно чтобы действие store вызывалось один раз при старте, проверяло наличие существующей сессии, если она существует, добавляла пользователя в store и все. Далее все meta у меня настроены на нужные пути. Просто думаю вешать данное действие на хук роутера неверный подход так как он при каждом переходе по пути будет обращаться в бэкэнд и забирать данные пользователя. Ни к чему это.

checkSession({commit, dispatch}) {
      return new Promise((resolve, reject) => {
        axios.get('/auth')
          .then(userdata => {
            commit('setUser', userdata.data)
            resolve(userdata)
          })
          .catch((err) => {
            dispatch('logout')
            reject(err)
          });
      })
    },

Вот я и ломаю голову, где еще вызов checkSession можно разместить чтобы он выполнился один раз

[Arsync]

Тогда можно рассмортеть систему плагинов . Такие файлы, которые вызываются при старте приложения. Подобная система есть и в Quasar Framework, известна как Boot Files. Но есть и одна проблема. Если у нас SPA, могут возникать ситуации, когда пользователь длительное время не взаимодействует с бэкендом и его дисконнектит по таймауту.

Регистрируем плагин, делаем в нём проверку на старте, а затем тут же извлекаем роутер из параметра функции в плагине, вешаем на него хук beforeEach, в который передаем константу с результатом отработавшей проверки.

Answer 2

[Nayob]

Разобрался почему не работало checkSession в хуке beforeCreate. Когда прикручивал Vuex забыл указать
axios.defaults.withCredentials = true;
В итоге вынес эту опцию в конфиг.
Спасибо всем откликнувшимся!