Funktioniert ASync/Await in der Route BeforeEach Guard in Vue nicht wie erwartet?

Question

Das ist mein Routenwächter:

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

});

Das Problem ist, dass ich, obwohl ich „await“ in der Versandmethode verwendet habe, nicht den Statuswert der Berechtigungen erhalten habe, der ursprünglich leer war Dies ist der Code des Vuex-Stores:

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: {}
}

Bitte helfen Sie mir, dieses Problem zu lösen, danke!

Answer 1

在Vuex中，操作是异步的。让调用函数（操作的发起者）知道操作完成的唯一方法是通过返回一个Promise并稍后解析它。

这里有一个例子：myAction返回一个Promise，进行一个http调用，并在稍后异步地解析或拒绝Promise。

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

}

现在，当你的Vue组件启动myAction时，它会得到这个Promise对象，并且可以知道它是否成功。下面是Vue组件的一些示例代码：

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

}

此外，当没有权限匹配时，您调用相同的路由，这样会一直调用相同的路由并造成无限循环。 如果权限被拒绝，请重定向到访问被拒绝的页面。