ASync/Await ne fonctionne-t-il pas comme prévu dans la route BeforeEach guard dans Vue ?

Question

Voici mon garde de route :

router.beforeEach(async (to, from, next) => {
  await store.dispatch('GetPermission');
  if (to.matched.some(record => record.meta.requireAuth)) {
    let permissions = store.state.permissions; //获取到的是空值
    console.log(permissions);
    if (permissions.filter(per => (per.name === 'read_list').length != 0)) {
      next({
        path: '/dashboard/create'
      })
    } else {
      next()
    }

  } else {
    next()
  }

});

Le problème est que même si j'ai utilisé wait dans la méthode de répartition, je n'ai pas obtenu la valeur de statut des autorisations qui était initialement vide Voici le code de la boutique vuex :

GetPermission(context) {
  axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token
  axios.get('http://127.0.0.1:8000/api/user').then((response) => {
    console.log(response)
    context.commit('Permissions', response.data.permission)
  })
}
//mutation:
Permissions(state, payload) {
  state.permissions = payload
}
//state
state: {
  error: '',
  token: localStorage.getItem('token') || null,
  permissions: '',
  success: '',
  isLoggedin: '',
  LoggedUser: {}
}

S'il vous plaît, aidez-moi à résoudre ce problème, merci !

Answer 1

Dans Vuex, les opérations sont asynchrones. La seule façon de faire savoir à la fonction appelante (l'initiateur de l'opération) que l'opération est terminée est de renvoyer une promesse et de la résoudre plus tard.

Voici un exemple : myAction renvoie une promesse, effectue un appel http, puis résout ou rejette la promesse de manière asynchrone.

actions: {
myAction(context, data) {
    return new Promise((resolve, reject) => {
        // 在这里执行一些操作... 比如使用vue-resource进行http调用
        this.$http("/api/something").then(response => {
            // http成功，调用mutator并在状态中更改一些内容
            resolve(response);  // 让调用函数知道http完成了。你可以发送一些数据回去
        }, error => {
            // http失败，让调用函数知道操作没有成功
            reject(error);
        })
    })
}

}

Maintenant, lorsque votre composant Vue lancera myAction, il obtiendra cet objet Promise et pourra savoir s'il a réussi ou non. Voici un exemple de code pour les composants Vue :

export default {
mounted: function() {
    // 这个组件刚刚创建。让我们在这里使用一个操作来获取一些数据
    this.$store.dispatch("myAction").then(response => {
        console.log("获取到了一些数据，现在让我们在这个组件中显示一些东西")
    }, error => {
        console.error("从服务器获取不到任何数据。提示用户检查网络连接并重试")
    })
}

}

De plus, lorsqu'aucune autorisation ne correspond, vous appelez la même route, qui continue d'appeler la même route et crée une boucle infinie. Si l'autorisation est refusée, redirigez vers la page d'accès refusé.