Vue-router: 如果用户没有权限，则重定向到路由

Question

我有一个使用vue和后端框架laravel的项目，需要检查用户是否具有访问资源或视图权限。在后端中，我使用Laravel Permissions来实现这一点，并且其运作良好，现在问题出现在前端。

当用户登录时，我会获取其权限并将其保存在localStorage中，那么如果用户没有某个路由的权限，如何防止其进入该路由呢？

例如，我有以下这些路由：

    {
      path: 'users',
      name: 'Users',
      component: Users,
      meta : {
        permissions: 'read_users'
      }
    },
    {
      path: 'roles-permissions',
      name: 'RolesPermissions',
      component: RolesPermissions,
      meta : {
        permissions: 'read_roles'
      }
    },
    {
      path: 'roles-permissions/create',
      name: 'CreateRolesPermissions',
      component: CreateRolesPermissions,
      meta : {
        permissions: 'create_roles'
      }
    },
    {
      path: 'roles-permissions/:id/edit',
      name: 'EditRolesPermissions',
      component: EditRolesPermissions,
      meta : {
        permissions: 'edit_roles'
      }
    },
    {
      path: 'customers',
      name: 'Clientes',
      component: CustomersList
    }

如果用户没有在['read_roles','create_roles','edit_roles','read_users']中的任何一个权限，则应将其重定向到customers页面。

var permissions = localStorage.getItem('permissions'); var can = to.meta.permissions ? (permissions.includes(to.meta.permissions) || to.meta.permissions == '*') : true;

如何实现这个功能？

- Carlos Salazar

Answer 1

这里有一个很好的Vue路由器身份验证实现示例：https://scotch.io/tutorials/vue-authentication-and-route-handling-using-vue-router

基本上，在允许用户打开受保护组件之前，您可以检查权限。最简单的方法是使用路由守卫。在您的路由器定义中：

{
  path: '/protected',
  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');
    }
  }
}

这个守卫将保护免受进入 /protected 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');
  }
})

关于路由守卫的更多信息：https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

- Beniamin H

---

问题不在于用户的身份验证，而在于检查权限。如果我在路由上设置所需的权限，那么如何在 router.beforeEach 中获取它呢？ - Carlos Salazar

以上代码可用于检查身份验证和授权。同样的方式，您可以检查用户是否已登录以及他是否具有所需的权限。 - Beniamin H