我的项目使用laravel fortify,惯性与vue。我必须添加基于角色的权限(就像 spatie 权限包一样)。我对于强化和惯性还是一个初学者。但我有 spatie 包的经验。我对如何添加角色和权限进行强化感到困惑。目前我计划创建像 spatie 包 has 这样的表结构(角色、权限、roles_has_permissions 等)。是否有每个构建包或更好的方法来实现角色和权限?并在 vue 文件中使用“@can”?谢谢你。
大家好,这是我目前所做的(我现在正在使用这个)。它正在工作,但仍需要一些改进,(任何更好的解决方案我真的很感激)
1)像往常一样安装和配置 spatie/laravel-permission
2)使用 Seeder 向表添加预定义的权限和角色
在用户模型中创建函数来获取权限数组列表
// user model function
public function getPermissionArray()
{
return $this->getAllPermissions()->mapWithKeys(function($pr){
return [$pr['name'] => true];
});
}
并将该功能添加到惯性中间件中
//App\Http\Middleware\HandleInertiaRequests
public function share(Request $request)
{
return array_merge(parent::share($request), [
'auth'=>['user' => $request->user() ? $request->user()->only('id', 'name', 'email') : null,
'can' =>$request->user() ? $request->user()->getPermissionArray() : []
],
]);
}
现在
$page.props.auth.can
可以全球访问
<div class="row">
<div class="col-sm-12 col-md-6" v-if="$page.props.auth.can['user_create']">
<inertia-link
class="btn btn-primary"
:href="$route('admin.user.create')"
>Create New
</inertia-link>
</div>
</div>
我解决了如下问题, 首先我将权限数组发送到 UI。
在用户模型中
<?php
// user model function
public function getPermissionArray()
{
return $this->getAllPermissions()->mapWithKeys(function($pr){
return [$pr['name'] => true];
});
}
在惯性共享中间件中
<?php
//App\Http\Middleware\HandleInertiaRequests
public function share(Request $request)
{
return array_merge(parent::share($request), [
'auth'=>['user' => $request->user() ? $request->user()->only('id', 'name', 'email') : null,
'can' =>$request->user() ? $request->user()->getPermissionArray() : []
],
]);
}
在应用程序js文件中,我添加了全局函数来检查用户是否拥有一个或多个权限
import Vue from 'vue'
Vue.mixin({
methods: {
hasAnyPermission: function (permissions) {
var allPermissions = this.$page.props.auth.can;
var hasPermission = false;
permissions.forEach(function(item){
if(allPermissions[item]) hasPermission = true;
});
return hasPermission;
},
},
})
在 vue 组件中:
<script>
export default {
data() {
return {};
},
mounted: function () {},
methods: {},
};
</script>
<template>
<div>
<li v-if="hasAnyPermission(['testiml_view', 'testiml_edit', 'testiml_create'])">
<inertia-link
:href="$route('admin.testimonial.index')"
class="side-nav-link-a-ref"
>
<i class="fas fa-feather"></i>
<span>Testimonial</span>
</inertia-link>
</li>
</div>
</template>
在 Inertia 中间件的
share
方法中:HandleInertiaRequest.php
,我使用以下方法将权限和角色数组传递给 Vue:
$permissions = $user->getAllPermissions()->pluck('name');
$roles = $user->roles()->pluck('name');
return array_merge(parent::share($request), [
'auth.user' => fn() => $request->user() ?
$request->user()->only('id', 'name', 'email', 'roles')
: null,
'auth.user.permissions' => $permissions,
'auth.user.roles' => $roles
]);