Router не видит изменения состояния isAuth, как отследить?

Question

[700Hp]

Код роутера

router.beforeEach((to, from, next) => {
  const requireAuth = to.meta.auth

  if (requireAuth && store.getters['auth/isAuthenticated']) {
    next()
  } else if (requireAuth && !store.getters['auth/isAuthenticated']) {
    next({name: 'login'})
  } else if (!requireAuth && store.getters['auth/isAuthenticated']) {
    next({name: 'admin'})
  } else {
    next()
  }
})

Код состояния

state() {
    return {
      isAuth: false,
      user: null,
      emailFormFactor: ''
    }
  },
 getters: {
    isAuthenticated(state) {
      return state.isAuth
    },
    getEmailFormFactor(state) {
      return state.emailFormFactor
    },
    getUser(state) {
      return state.user
    }
  }

Код главного App.vue

onBeforeMount(
      () => {
        if (localStorage.getItem('auth-token')) {
          store.dispatch('auth/checkAuth')
        }
      }
    )

Не могу отследить изменение при обновлении токена.
Получать сразу элемент из local storage в isAuth не вариант, т.к прежде выполняется проверка на валидность токена.

Answer 1

[700Hp]

Моим решением на данный момент является повторный запрос на сервер в router.beforeEach, если падает 401 статус, то он разого делает перевызов, и либо подгружает уже как авторизованный. Или как неавторизованный.

Comments

[Aetae]

Но это какашка. У тебя должна быть какая-то либа подключена для работы с токенами, которая нормально авторизуется, сама рефрешит токен итд. И у такой либы конечно можно подписаться на обновление токена и писать его в стор...

[700Hp]

Aetae, можно конкретнее?

[Aetae]

700Hp, что-то из этого, например.
А там что-то типа:

oauth.onRefresh = (token) => store.dispatch('auth/refreshTocken', token)

.

[700Hp]

Aetae, прислушался к совету.
В итоге в отдельном файле работы с axios, накидал интерцептор.

$authHost.interceptors.response.use((config) => {
  return config
},
  async (error) => {
  console.log('error', error.config)
    const originalRequest = error.config
    if(error.response.status == 401 && !error.config._isRetry) {
      originalRequest._isRetry = true
      try {
        const {data} = await $authHost.get('/user/refresh')
        console.log('data', data)
        localStorage.setItem('auth-token', data.accessToken)
        return $authHost.request(originalRequest)
      } catch (e) {
        console.log('Не авторизован')
      }
    }
    throw error
  })

такой подход как?

[Aetae]

700Hp, суть в том, что у тебя не должно быть мусорных запросов с ответом 401. У токена есть конкретное время жизни, любая нормальная не самописная либа или обновляет токен заранее в фоновом режиме, или, хотя-бы, при каждом запросе в том же интерцепторе проверяет не устарел ли токен (локально, без запросов, чисто по времени) и обновляет его если да.

[700Hp]

Aetae, Я так понял, мы говорим об оптимизации, мол не делать просто так запрос на сервер, когда пользователь вот только авторизовался.

Ниже прилагаю похожий вопрос на хабре, может кому полезным будет.

https://qna.habr.com/q/951439

. Там же сказано о том, что уж проще дождаться ответа с сервера.

Спасибо.

[Aetae]

700Hp, а ещё проще испражняться не снимая штаны.

Да, во-первых: не делать лишний запрос на сервер, во-вторых: не засорять логи на клиенте и на сервере ошибками, что придётся кстати когда нужно будет отлавливать настоящую ошибку, в-третьих: это просто правильно, как задумано создателями всего этого механизма.

А так: можно сделать что угодно.
Как правильно - я сказал, это не рокет сайнс какой.

[700Hp]

Aetae, получается мне придётся вытащить секретный ключ токена на клиент.
Насколько это безопасно? Интересен ваш опыт.