如何将角色和权限从 Laravel 传递给 vue.js答案

【问题标题】：How to pass Role and permission from Laravel to vue.js如何将角色和权限从 Laravel 传递给 vue.js
【发布时间】：2019-10-24 11:44:03
【问题描述】：

我遇到了一些麻烦，将经过身份验证的用户的角色和权限传递给 vue 组件。我的目标是限制一些元素，例如创建、编辑、删除按钮。

我已经学习了这个教程：https://mmccaff.github.io/2018/11/03/laravel-permissions-in-vue-components/?fbclid=IwAR1Oja6yESRJS65huRXPa9SwO2oQdP3W8TwhE_pReUtaK_8rnVAOzixzwXM 但我没有成功。

这是我的代码的一部分：

RolesAndPermissionsSeeder

 // create permissions
        //Categorias
        Permission::create(['name' => 'create category']);
        Permission::create(['name' => 'update category']);
        Permission::create(['name' => 'list categories']);
        Permission::create(['name' => 'desactivate category']);
        Permission::create(['name' => 'activate category']);
        Permission::create(['name' => 'delete category']);
        //Tareas
        Permission::create(['name' => 'create task']);
        Permission::create(['name' => 'update task']);
        Permission::create(['name' => 'list tasks']);
        Permission::create(['name' => 'desactivate task']);
        Permission::create(['name' => 'activate task']);
        Permission::create(['name' => 'delete task']);
    //Tareas de planificador
            $role = Role::create(['name' => 'planificador']);
                $role->givePermissionTo(['list tasks']);
                $role->givePermissionTo(['list categories']);
            // or may be done by chaining
            //TAreas de Aministrador
            $role = Role::create(['name' => 'admin']);
                //Categorias
                $role->givePermissionTo(['create category']);
                $role->givePermissionTo(['list categories']);
                $role->givePermissionTo(['update category']);
                $role->givePermissionTo(['desactivate category']);
                $role->givePermissionTo(['activate category']);

我可以限制用户，只有菜单，但是当他们访问列表时，例如类别列表中，他们可以选择创建，即使他们的角色没有此选项。这是我的管理面板。

在我的用户模型中，我具有获取权限的功能 app/User.php：

public function getAllPermissionsAttribute() {
    $permissions = [];
    foreach (Permission::all() as $permission) {
        if (Auth::user()->can($permission->name)) {
            $permissions[] = $permission->name;
        }
    }
    return $permissions;
}

在我的 principal.blade.php 中，我放置了 javascript 数组 ......

 </footer>

    <!-- Bootstrap and necessary plugins -->
    <script src="js/app.js"></script>
    <script src="js/plantilla.js"></script>
    <script>
        window.Laravel = {!! json_encode([
        'csrfToken' => csrf_token(),
        'user' => Auth::user()
    ]) !!};
    </script>

</body>

</html>

我的 mixin Permissions.vue

<script>
    export default {
        methods: {
            $can(permissionName) {
                return Permissions.indexOf(permissionName) !== -1;
            },
        },
    };
</script>

在 app.js 中导入（然后编译）

import Permissions from './mixins/Permissions';
Vue.mixin(Permissions);

最后，我的组件 Categoria.vue 中的 can 限制

 <div class="card">

            <div class="card-header">
                <i class="fa fa-align-justify"></i> Categorías
                <div v-if="$can('create category')">
                    <button type="button" @click="abrirModal('categoria', 'registrar')" class="btn btn-secondary">
                        <i class="icon-plus"></i>&nbsp;Nuevo
                    </button>
                </div>
            </div>

这是错误

很抱歉扩展问题，但我正在尝试更详细。

【问题讨论】：

为什么不创建角色明智的组件？

标签： laravel-5 vuejs2 permissions

【解决方案1】：

在 app.blade.php 等通用文件中添加脚本时，请确保添加以下脚本：

<script>
    @auth
        window.Permissions = {!! json_encode(Auth::user()->allPermissions, true) !!};
    @else
        window.Permissions = [];
    @endauth
</script>
<script src="{{ asset('js/app.js') }}"></script>

重要提示：确保在主 js 文件之前添加它，例如 (public/js/app.js)。

【讨论】：