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

Question

我有一个 vue 项目和 laravel 作为一个 back-end，我必须在我使用的后端检查用户是否有权访问资源或视图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 权限 = localStorage.getItem('permissions'); var 可以 = to.meta.permissions 吗？ (permissions.includes(to.meta.permissions) || to.meta.permissions == '*') : true;

如何做到这一点？

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。在这里你可以检查工作代码笔：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

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

Vue-router: redirect to route if user does not have permissions

permissions

laravel

vue.js

vue-router