我解决了如下问题,
首先,我将权限数组发送到 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>