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

【问题标题】：Check permissions before vue.js route loads在 vue.js 路由加载之前检查权限
【发布时间】：2017-06-06 16:52:39
【问题描述】：

有谁知道如何在渲染 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()钩子中添加相同的代码，但似乎没有任何效果。

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

提前致谢！

【问题讨论】：

标签： javascript routing vue.js

【解决方案1】：

你需要的东西在 Vue Router Docs 中被定义为 Data Fetching - https://router.vuejs.org/en/advanced/data-fetching.html

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

将checkPermissions保存在created hook中，然后观察路由对象：

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

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

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

【讨论】：