Adakah ASync/Await tidak berfungsi seperti yang dijangkakan dalam laluan BeforeEach guard dalam Vue?

Question

Ini adalah pengawal laluan saya:

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

});

Masalahnya ialah walaupun saya menggunakan await dalam kaedah penghantaran, saya tidak mendapat nilai status kebenaran yang pada mulanya kosong Ini adalah kod kedai 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: {}
}

Tolong bantu saya menyelesaikan masalah ini, terima kasih!

Answer 1

Dalam Vuex, operasi tidak segerak. Satu-satunya cara untuk membiarkan fungsi panggilan (pemula operasi) mengetahui bahawa operasi selesai adalah dengan mengembalikan Janji dan menyelesaikannya kemudian.

Berikut ialah contoh: myAction mengembalikan Janji, membuat panggilan http dan kemudian menyelesaikan atau menolak Janji secara tidak segerak.

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

}

Kini, apabila komponen Vue anda melancarkan myAction, ia akan mendapat objek Promise ini dan boleh mengetahui sama ada ia berjaya atau tidak. Berikut ialah beberapa contoh kod untuk komponen Vue:

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

}

Selain itu, apabila tiada kebenaran sepadan, anda memanggil laluan yang sama, yang terus memanggil laluan yang sama dan mencipta gelung tak terhingga. Jika kebenaran ditolak, ubah hala ke halaman akses ditolak.