ASync/Await 在 router.BeforeEach guard in vue 中没有按预期工作？

Question

这是我的路由器守卫:

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

});

虽然我在调度方法中使用 await，但我没有得到最初为空的权限状态值，但问题就在这里 这里是 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:{}
    }

请帮我解决一下??

Answer 1

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

这是一个示例：myAction returns 一个 Promise，进行 http 调用并稍后解析或拒绝 Promise - 全部异步

actions: {
myAction(context, data) {
    return new Promise((resolve, reject) => {
        // Do something here... lets say, a http call using vue-resource
        this.$http("/api/something").then(response => {
            // http success, call the mutator and change something in state
            resolve(response);  // Let the calling function know that http is done. You may send some data back
        }, error => {
            // http failed, let the calling function know that action did not work out
            reject(error);
        })
    })
}

}

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

export default {
mounted: function() {
    // This component just got created. Lets fetch some data here using an action
    this.$store.dispatch("myAction").then(response => {
        console.log("Got some data, now lets show something in this component")
    }, error => {
        console.error("Got nothing from server. Prompt user to check internet connection and try again")
    })
}

}

此外，当没有权限匹配时你正在调用相同的路由，在这种情况下它总是调用你的相同路由并进行无限循环。如果权限被拒绝，则重定向到访问被拒绝的页面。

ASync/Await 在 router.BeforeEach guard in vue 中没有按预期工作？

ASync/Await is not working as expected in router.BeforeEach guard in vue?

router

vue.js

vuex