[英]How to Add Roles and Permission to Laravel Fortify + Inertia + vue?
我的项目使用 laravel fortify,惯性与 vue。 我必须添加基于角色的权限(就像 sptie 权限包一样)。 我仍然是一个要强化和惯性的初学者。 但我有 spatie 包的经验。 我坚持如何添加角色和权限来强化。 目前我正计划创建像 spatie 包 have(roles, permssions, roles_has_permissions 等) 的表结构。 是否有按构建包或更好的方法来实现角色和权限? 并在 vue 文件中使用“@can”? 谢谢你。
大家好,这是我目前所做的(我现在正在使用这个)。 它正在工作,但仍需要一些改进,(任何更好的解决方案,我真的很感激)
1)像往常一样安装和配置spatie/laravel-permission
2)使用播种机向表添加预定义的权限和角色
在用户模型中创建函数以获取权限数组列表
// 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() : []
],
]);
}
在 app 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>
在惯性中间件的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
]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.