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 观察getter 怎么样？

假设您的 getter 在尚未获取数据的情况下返回 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('/');