Vuejs2 自动登录完成后请求vuejs axios

如何在自动登录通过后执行所有其他请求。代码示例

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

有时，接收用户数据（用户名和id）的请求并没有时间传递和提交到状态，我收到一个错误，用户名在状态为null

我已通过外接程序login func将用户名和id保存在localstorage中解决了该问题，在尝试自动登录后，我有了下一个代码：

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的anny请求，直到成功传递

分派（'getUser'）

。

getUser

code示例：

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的新手：）

首先，让getter、action、mutation和state的名称更加清晰和明显（例如getUser代表getter，setUser代表action）

我建议创建一个单独的身份验证模块（将所有身份验证逻辑放在此模块中），并在Vuex操作或应用程序中的某个位置使用它

此类模块应通过Vuex getter、setter和操作（例如，获取和设置当前用户身份验证状态）与存储交互。它使身份验证更加简洁明了

通过这种方式，您将能够从任何应用程序组件调用此模块的方法并等待结果

在下面的代码区（

http_auth.js

）

中，$auth

是独立的身份验证模块，可以在Vuex中设置用户状态并获取当前状态。此外，它还使用localStorage检查保存的令牌（用户数据），并尝试使用保存的令牌进行授权（

tryAutoLogin

）。失败时，它将重定向到登录页面

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

Auth方法是基于承诺的，所以您只需等待解析或拒绝即可

如果您只想使用Vuex解决方案，那么应该使用操作来调用API请求，并将它们封装在承诺中。此外，您还可以在其他操作中分派一些操作（例如，尝试在基本登录操作中使用保存的令牌登录）。 示例代码（Vuex操作）：

在上面，我们使用promise基本api调用（

axios.get（getters.get\u SOME\u URL+id）

），然后处理接收到的数据（

process\u SOME\u data

）。 然后我们可以在路由器中使用它，例如（或应用程序的任何其他部分）：

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)
      })
    })
  }

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