Обновите токен Vuex перед входом в Routing - PullRequest
Новая
       5

Обновите токен Vuex перед входом в Routing

0 голосов
/ 13 февраля 2019

У меня есть интерфейс веб-приложения с API-интерфейсом, встроенным в Laravel с Passport.

Моя проблема заключается в том, что когда я обновляю свою страницу (в SPA, написанном с помощью Vuejs / Vuex), я должен обновить свой токен для сеанса обновленияс моим Api.

Я пытался в main.js , но проблема в том, что запрос асинхронный и ответ поступил после маршрутизации.

main.js

if (localStorage.getItem('refresh_token')) {
   store.dispatch('refresh_token').then(function(response){
      console.log(response);
   });
}
new Vue({
  router,
  store,
  env,
  render: h => h(App)
}).$mount('#app')

Функция обновления токена, вызов моего Api, и с ответом установите новый токен и новый токен обновления.Но моя проблема в том, что я делаю этот вызов таким образом, что я могу сделать первый асинхронный вызов в моей «панели управления» со старым токеном, а затем с новым.Поэтому я пробовал по-разному, но я не знаю, есть ли лучшая практика.

Итак, мой вопрос: где мне обновить токен в Vuejs App с vuex store?

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Как насчет использования router#beforeEach guard ?Я использую его, чтобы выяснить, хранится ли токен аутентификации в cookie-файле перед доступом к любому «ограниченному» компоненту.Если токен не установлен, я перенаправляю на /login.

Я понимаю, что мой сценарий - именно то, о чем вы просите, но я надеюсь, что вы сможете использовать его для расширения своей реализации.

0 голосов
/ 14 февраля 2019

Я предлагаю поместить это в свойство mounted вашего верхнего уровня компонента Vue.Если у вас есть другие компоненты, которые зависят от обновления вашего токена, вы можете связать это с переменной состояния в вашем магазине, которая сигнализирует о завершении обновления.Например, с компонентом верхнего уровня App.vue: 

...

mounted () {
  store.dispatch('refresh_token')
}

...

Добавление переменной состояния в хранилище vueex: 

const store = new Vuex.Store({
  state: {
    sessionRefreshed: false
  },
  ..

  mutations: {
    [REFRESH_TOKEN] (state) {
      // existing mutations, and..
      state.sessionRefreshed = true
    },
  },
  ..
  actions: {
    refreshToken ({ commit }) {
      myAsyncFetchToken().then(() => commit(REFRESH_TOKEN))
    },
  }

Это гарантирует, что все ваше приложение знает о состоянииВаше обновление, не заставляя его быть синхронным.Затем, если у вас есть компоненты, которые требуют обновления токена, вы можете показать загрузку виджетов, заполнителей и т. Д., А также использовать наблюдатель для выполнения действий при изменении состояния.

...