如何在vue项目中添加权限控制？

Question

我正在将vue js添加到我当前的laravel应用程序中，这样我就可以使它成为SPA，这意味着laravel只是充当后端，其余部分则由vue js控制，从呈现视图到路由。

我当前的laravel应用程序使用柯丁拉拉-acl来控制哪个页面和我的用户可以通过简单的操作完成哪些操作。

把这个放在路线上：

Route::get('admin', [
        'as'           => 'admins.admin.index',           
        'uses'         => 'UserController@index',
        'middleware'   => ['auth', 'acl'],
        'can'          => 'view.admin_view']);

如果我这样做只是为了隐藏一些操作，如果用户没有权限

@permission('view.admin_view')
   //some link or button          
@endpermission

所有这些权限都存储在mysql数据库中，每个用户都有不同的权限集。

但是如果我把它变成js SPA，怎么做呢？因为所有的路线都是通过vue js控制的？

Answer 1

您可以在通过beforeEnter() ( routeConfig )到达特定路由之前执行检查。样品在这里：

​

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ... Do your checkings here
      }
    }
  ]
})

​

Answer 2

要简单地使用权限检测逻辑，可以使用CASL https://github.com/stalniy/casl。

在文档中有很多有趣的内容，关于中介的文章解释了如何与Vue和其他流行框架集成！