Vue：在 beforeRouteEnter 钩子中使用 Vuex 存储取消导航

Question

我正在尝试让 vue-router 在完成导航到新路线之前检查权限列表。权限存储在 vuex 中，理想情况下我希望避免将它们作为道具传递到任何地方。

当我使用next(vm => {}) 回调时，无论结果如何，它都会路由到下一页，即使它应该收到false 并取消导航。

beforeRouteEnter(to, undefined, next) {
  next(vm => {
    const allowedRoles = ['Administrator', 'Contributor'];
    if (vm.$store.state.authentication.userInfo.userRoles.some(value => allowedRoles.includes(value))) {
      return true;
    }
    else {
      return false;
    }
  });
}

我在这里做错了什么导致它失败？

Answer 1

当您在next 中访问vm 时，导航已经开始。在调用next 之前测试该值。您可以将 store 导入到组件中进行访问：

import store from '@/store/index.js';  // import the store

beforeRouteEnter(to, undefined, next) {
  const allowedRoles = ['Administrator', 'Contributor'];
  const roles = store.state.authentication.userInfo.userRoles;
  const isAllowed = roles.some(value => allowedRoles.includes(value))
  next(isAllowed);  // passes `true` or `false` to `next`
},

这样你就可以在不需要组件实例的情况下访问商店。