代码之家 › 专栏 › 技术社区 › Carlos Salazar

Vue路由器:如果用户没有权限,则重定向到路由

vue-router permissions vue.js laravel

Carlos Salazar · 技术社区 · 6 年前

我有一个 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 permissions=localstorage.getitem('permissions'); var can=to.meta.permissions?(permissions.includes(to.meta.permissions)to.meta.permissions='*'):真;

怎么能做到?

1 回复 | 直到 6 年前

Beniamin H Sai Sudha 6 年前

下面是使用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 网址。您可以在这里检查工作代码笔: 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

推荐文章

SilverF0x · 试图通过自制为Appium安装移动设备驱动程序时,Mac上出现Chown故障

6 年前

Tonher · 向Mifare Classic 1k NFC标记写入和读取数据

7 年前

Lassi · 在Go web app路由器中检查用户权限的最佳方法

7 年前

Veerendra K · 在docker容器中使用非root用户运行进程

7 年前

ArghadipDasCEO · Android studio-在应用程序中自动添加错误权限

7 年前

odysseus · 对非IBMid用户的现有权限没有输出?

7 年前

Matt Prigge · 以管理员身份运行时提升到高完整性级别

7 年前

D Mac · 在AWS S3中,如果文件已经存在,如何授予帐户权限

7 年前

mianlaoshu · android:使用中的“必需”功能和用户权限中的“必需”功能有什么区别?

7 年前

ArcticWFox · 使用Powershell获取ACL文件夹和子文件夹+用户

7 年前