Запрос vuejs axios после завершения автоматического входа

Question

Как выполнить все остальные запросы после автоматической авторизации. Пример кода.

  axios.get('personal/' + this.$store.state.username + '/config/', {headers: { Authorization: 'Token ' + this.$store.state.idToken }})

Иногда запрос, который получает пользовательские данные (имя пользователя и идентификатор), не успевает пройти и зафиксировать состояние, и я получаю сообщение об ошибке, что имя пользователя в состоянии равно нулю.

Я решил эту проблему, добавив логин func для сохранения имени пользователя и идентификатора в localalstorage, и после автоматического входа в систему у меня следующий код:

tryAutoLogin ({ commit, dispatch }) {
      const token = localStorage.getItem('token')
      if (!token) {
        return
      } else {
        commit('getToken', {
          key: token
        })
        const userId = localStorage.getItem('userId')
        const username = localStorage.getItem('username')
        if (!userId || !username) {
          dispatch('getUser')
        } else {
          commit('getUserData', {
            id: userId,
            username: username.username
          })
        }
      }

Это нормально? или есть какой-либо способ остановить любой запрос к API, пока dispatch('getUser') не будет успешно передан. пример кода getUser:

getUser ({ commit, state }) {
      if (!state.idToken) {
        return
      }
      axios.get('rest-auth/user/', {headers: { Authorization: 'Token ' + state.idToken }})
        .then(res => {
          localStorage.setItem('username', res.data.username)
          localStorage.setItem('userId', res.data.pk)
          commit('getUserData', {
            id: res.data.pk,
            username: res.data.username
          })
        })
    },

Плз, не будь строг, я новичок в FE vue js:)

Answer 1

Прежде всего, сделайте имена получателей, действий, мутаций и состояний более понятными и понятными (например, getUser для getters и setUser для action).

Я рекомендую создать отдельный модуль аутентификации (поместить всю логику аутентификации в этот модуль) и использовать его в действиях Vuex или где-то в приложении.

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

Таким образом, вы сможете вызывать методы этого модуля из любого компонента приложения и ждать результата.

В приведенном ниже коде (http_auth.js) this.$auth это отдельный модуль аутентификации, который может устанавливать пользовательское состояние в Vuex и получать текущий статус. Также он использует localStorage для проверки сохраненного токена (пользовательских данных) и пытается авторизоваться с помощью сохраненного токена (tryAutoLogin в вашем случае). При сбое происходит перенаправление на страницу входа.

...
methods: {
  async loadInitialData () {
    if (await this.$auth.init()) {
      axios.get('initial-data-url').then(res => ...)
    }
  }
},
created () {
  this.loadInitialData()
}
...

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

Если вы просто хотите использовать решение только для Vuex, вы должны использовать действия для вызова API-запросов и переноса их в Promises. Также вы можете отправлять некоторые действия внутри других (например, попробуйте войти с сохраненным токеном внутри основного действия входа). Пример кода (действие Vuex):

LOAD_SOME_DATA ({ commit, state, getters }, id) {
    return new Promise((resolve, reject) => {
      if (!id) {
        router.push('/')
        return reject('Invalid ID passed.')
      }
      return axios.get(getters.GET_SOME_URL + id).then(response => {
        commit('PUSH_SOME_DATA', response.data)
        return store.dispatch('PROCESS_SOME_DATA').then(result => {
          return resolve(response)
        }, error => {
          console.error('Error loading some data: ', error)
          return reject(error)
        })
      }, error => {
        router.push('/')
        return reject(error)
      })
    })
  }

Выше мы завернем в обещанный базовый API-вызов (axios.get(getters.GET_SOME_URL + id)), затем обработаем полученные данные (PROCESS_SOME_DATA). Затем мы можем использовать его в роутере, например (или в любой другой части приложения):

store.dispatch('LOAD_SOME_DATA', to.params.id).then(result => ...)