Question

有人知道如何在呈现vue.js路由之前检查用户的权限吗？我通过检查组件created阶段的权限来提出部分解决方案：

created: function () {

    var self = this;

    checkPermissions(function (result) {
        if(result === 'allowed') {
            // start making AJAX requests to return data
            console.log('permission allowed!');
        } else {
            console.log('permission denied!');
            self.$router.go('/denied');
        }   
    });
}

然而，问题是在checkPermission()函数被激活并重新路由到/denied之前，整个页面会暂时加载（尽管没有任何数据）。

我也尝试在beforeCreate()钩子中添加相同的代码，但它似乎没有任何效果。

还有其他人有其他想法吗？注意 - 权限因页面而异。

提前致谢！

Answer 1

您需要的东西在Vue Router Docs中定义为数据提取 - https://router.vuejs.org/en/advanced/data-fetching.html

因此，正如文档所说，有时您需要在激活路由时获取数据。

在创建的钩子中保留checkPermissions，然后观察路径对象：

watch: {
  // call again the method if the route changes
  '$route': 'checkPermissions'
}

一个可能更方便的解决方案是将创建的钩子中的逻辑移动到分离的方法中，然后在钩子和监视对象中调用它。（使用ES6语法）

export default {
  created() {
    this.checkPermissions()
  },
  watch: {
   '$route': 'checkPermissions'
  },
  methods: {
    checkPermissions() {
      // logic here
    }
  }
}

在vue.js路由加载之前检查权限

1 个答案: