vue.js：路由守卫等待异步值

Question

正如每个应用程序中我有几条路线。例如（router/index.js节选）：

[{ 
    path: '/reporting', 
    name: 'Reporting', 
    component: reporting, 
    meta: { 
     adminOnly: true 
    } 
}, 
...] 

正如你可以在路线定义见，访问reporting当用户需要有管理员权限，这在vuex商店的属性。问题：这个属性是异步的，当初访问警卫时当然是错误的。我怎样才能让我的警卫等待呢？

后卫：

if (to.matched.some(route => route.meta.adminOnly)) { 
    if (store.getters.userInfo.isAdmin) { 
     next() 
    } else { 
     next('/') 
    } 
} else { 
    next() 
} 

Answer 1

什么看，吸气，用store.watch？

假设您的获得者返回null如果尚未获取数据。

if (store.getters.userInfo.isAdmin === null) { 
    const watcher = store.watch(store.getters.userInfo.isAdmin, isAdmin => { 
     watcher(); // stop watching 
     if (isAdmin) next(); 
     else next('/'); 
    }); 
} 
else if (store.getters.userInfo.isAdmin) next(); 
else next('/');