Javascript 等待vuex中的axios API调用完成，然后继续vue路由器保护

我有一个django rest axios vuejs应用程序堆栈，我正试图在

vue路由器中为它做一些事情

在每个

保护之前的

vue路由器

中，我正在验证权限，这是通过在vuex存储中检查名为
me
的对象中的内容来完成的。除了刷新页面外，其他一切都正常

实际上，刷新页面也会清除vuex存储和my
，然后每次
尝试从存储中检查空的
me
对象

因此，如果这个
me
对象不在存储中，我想从API中获取它。
问题是它需要“一些时间”，并且在API调用完成之前执行
hasPermission（）
方法

因此，我尝试在API调用之前放置一个
wait
关键字，但它不起作用

我的<代码>每次之前

防护：

router.beforeach（异步（到、从、下一个）=>{
const isLoggedIn=getIsLoggedIn（）
HandleLoggeDin状态（isLoggedIn）
if（to.meta.requireAuth）{
如果（isLoggedIn）{
if（to.meta.permission）{
如果（！store.state.me）正在等待store.dispatch（'FETCH_me'））
hasPermission（to.meta.permission）？next（）：next（{name:'HomePage'}）
}否则{
下一个（）
}
}否则{
下一步（{name:'LoginForm'}）
}
}否则{
下一个（）
}
})

我在商店中的操作：

操作：{
取回我：（状态）=>{
http
.get（'base/users/me/'））
。然后（响应=>{
state.me=response.data
})
.catch（错误=>{
console.log（错误）
})
}
}

我发现让它等待的唯一方法是执行以下操作：

功能睡眠（毫秒）{
返回新承诺（解析=>setTimeout（解析，毫秒））
}
路由器.beforeach（异步（到、从、下一个）=>{
const isLoggedIn=getIsLoggedIn（）
HandleLoggeDin状态（isLoggedIn）
if（to.meta.requireAuth）{
如果（isLoggedIn）{
if（to.meta.permission）{
如果（！store.state.me）{
store.dispatch（'FETCH_ME'）
等待睡眠（2000年）
}
hasPermission（to.meta.permission）？next（）：next（{name:'HomePage'}）
}否则{
下一个（）
}
}否则{
下一步（{name:'LoginForm'}）
}
}否则{
下一个（）
}
})

用一点

sleep（）

方法让它“随机”（2秒）等待一段时间

我对

async

wait

so.的用法有点陌生。。我缺少什么来让

等待存储。分派（'FETCH_ME'）

工作

---

提前感谢：）

我有一个类似逻辑的宠物项目。我没有使用meta

async beforeEnter(to, from, next) {
   await store.dispatch('getUser')
   if (store.getters.user) return next()
    next('/login')
}

逻辑如下。如果用户已登录，则浏览器中会有一个cookie，它将与store.dispatch一起发送。如果令牌有效，后端返回用户，即如果getter返回用户，则用户已登录。我想你的逻辑应该是一样的

我终于找到了这个我以前没见过的东西

这允许我重写我的

FETCH\u me

操作，如下所示：

FETCH_ME（{commit}）{
返回新承诺（（解决、拒绝）=>{
http
.get（'base/users/me/'））
。然后（响应=>{
提交（'SET_ME'，response.data）
解决（）
})
.catch（错误=>{
console.log（错误）
拒绝（错误）
})
})
}

其中，

SET\u ME

是我已经发生的突变：

SET_ME:（状态，用户）=>{
state.me=用户
},

这最终适用于我的案例，在

路由器中执行此操作。在每次
防护之前：

if（！store.state.me）wait store.dispatch（'FETCH_me'）
有效地等待
dispatch
操作完成