Question

我有一个简单的vue应用程序，我正在尝试添加简单的身份验证。在我的login.vue中，我使用axios通过ajax对用户进行身份验证，并将api返回的令牌存储在商店中，然后重定向到新页面（例如：dashboard.vue）。

问题是令牌已保存但视图未更新，无法调用router.push（）......

任何想法为什么不起作用？感谢

Login.vue

methods: {
authenticate () {
  var dataLogin = {
    email: this.login,
    password: this.password
  }
  var headers = { headers: { 'Content-type': 'application/json', 'Accept': 'application/json' } }
  axios.post(config.apiUrl, dataLogin, headers)
  .then(response => {        
    this.$store.dispatch('login', response.data).then(() => {
      // if there is no error go to home page
      if (!this.$store.getters.error) {
        this.$router.push('/')
      }
    })
  })
  .catch(error => {
    this.errorMessage = error.response.data.message
    this.authError = true
  })
}

}

商店功能只使用localStorage

保存令牌

const actions = {
    login (context, data) {
        context.commit('authenticate', data)
    }
}
const mutations = {
    authenticate (state, data) {        
        localStorage.setItem('user-access_token', data.access_token)
    }
}

Answer 1

发送操作时，您正在调用then()处理程序。

但您的操作不会返回promise。

所以在你的行动中回复承诺如下：

const actions = { 
    login (context, data) {
        return new Promise((resolve, reject) => {
            context.commit('authenticate', data) 
            resolve()
        }) 
    } 
}

同时将您的承诺链接起来以提高可读性

axios.post(config.apiUrl, dataLogin, headers)
  .then(response => {        
    return this.$store.dispatch('login', response.data)
  }).then(() => {
      // if there is no error go to home page
      if (!this.$store.getters.error) {
        this.$router.push('/')
      }
  })
  .catch(error => {
    this.errorMessage = error.response.data.message
    this.authError = true
  })

如何更新axios promise中的视图和商店发送后的视图？

1 个答案: