ASync/Await 在 router.BeforeEach 中没有按预期工作？答案

【问题标题】：ASync/Await is not working as expected in router.BeforeEach guard in vue?ASync/Await 在 router.BeforeEach 中没有按预期工作？
【发布时间】：2021-03-11 08:59:09
【问题描述】：

这是我的路由器保护：

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

请帮我解决？？

【问题讨论】：

我可以通过这种方式在 vuex 操作中使用 return 来解决这个问题GetPermission(context){ axios.defaults.headers.common['Authorization']='Bearer ' + context.state.token return axios.get('http://127.0.0.1:8000/api/user').then((response)=>{ console.log(response) context.commit('Permissions',response.data.permission) }) } 但是现在我遇到了很多请求错误，那里有什么问题？

标签： vue.js vuex router

【解决方案1】：

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

这里是一个例子：myAction 返回一个 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")
    })
}

}

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

【讨论】：