限制每个角色的路由答案

【问题标题】：Restrict routing per role限制每个角色的路由
【发布时间】：2019-01-24 22:27:24
【问题描述】：

是否可以根据登录用户角色等值限制某些路由和/或更改任何路由的组件？

我想要这个，所以管理员的默认页面与普通用户不同，但如果在浏览器中手动设置路由，也可能限制访问。

或者有一个重定向到另一个路由的基础组件是更好的解决方案吗？

我了解通过路由器限制访问并不能取代真实帐户的安全性，但似乎是防止用户猜测受限路由的第一步。

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

这是一个使用 vue 路由器实现身份验证和授权的好例子：https://scotch.io/tutorials/vue-authentication-and-route-handling-using-vue-router

基本上，您可以在让用户打开受保护的组件之前检查权限。实现这一点的最简单方法是使用路由器防护。在您的路由器定义中：

{
  path: '/proctected',
  beforeEnter(to, from, next) {
    if (isAuthenticated()) {
      if (!hasPermissionsNeeded(to)) {
        next('/page-to-show-for-no-permission');
      } else {
        next();
      }
    } else {
      next('/page-to-show-for-unauthenticated-users');
    }
  }
}

这个守卫将防止进入/proctected url。在这里你可以检查工作的codepen：https://codepen.io/anon/pen/JwxoMe

下面是所有路由的守卫示例：

router.beforeEach((to, from, next) => {
  if (isAuthenticated()) {
    if (!hasPermissionsNeeded(to)) {
      next('/page-to-show-for-no-permission');
    } else {
      next();
    }
  } else {
    next('/page-to-show-for-unauthenticated-users');
  }
})

【讨论】：

太棒了，这正是我想要的，而且这个链接也很有帮助。