Vue中的路由BeforeEach守衛中，ASync/Await是否無法如預期運作？

Question

這是我的路由守衛：

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

});

問題在於，儘管我在dispatch方法中使用了await，但我沒有取得到最初為空的permissions的狀態值 這是vuex store的程式碼：

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

請幫我解決這個問題，謝謝！

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("从服务器获取不到任何数据。提示用户检查网络连接并重试")
    })
}

}

此外，當沒有權限匹配時，您會呼叫相同的路由，這樣會一直呼叫相同的路由並造成無限循環。 如果權限被拒絕，請重新導向至存取被拒絕的頁面。