vue.js: Route guard 等待异步值

Question

在每个应用程序中，我都有几条路线。例如（router/index.js摘录）：

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

在路由定义中可以看到，访问reporting时用户需要有admin权限，在vuex store中是属性。问题：这个 属性 是异步的，当最初在守卫中访问时当然是错误的。怎么才能让守卫等着呢？

后卫：

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

Answer 1

使用 store.watch 观看 getter 怎么样？

假设您的 getter returns 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('/');