Question

我遇到了一些麻烦，将身份验证的用户的角色和权限传递给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>

这是错误

很抱歉，我想扩大这个问题，但我想更详细地说明。

Answer 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）。

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

1 个答案: