在 vue 中使用 Laravel-permission 的 @can 标签

1. 在需要权限校验的 model 中新增方法

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

2. 在 app.blade 中存储当前用户的所有权限

<script>
    @auth
        window.Permissions = @json(Auth::user()->allPermissions);
    @else
        window.Permissions = [];
    @endauth
</script>

3. 新建 vue component

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

4. 在 app.js 注册 vue 组件

import auth from './components/AuthComponent';\
Vue.mixin(auth);

5. 在vue中使用

 <a v-if="$can('admin.admins.delete')" class="text-danger" @click="dataDelete(admin)">
本作品采用《CC 协议》,转载必须注明作者和本文链接
沉迷学习,无法自拔
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 4

在 foreach 内取 Auth::user() 性能较差,可以提到外面。其实不应该这么做,应该直接读取出当前用户的所有权限。

4年前 评论

个人觉得这样写会更好

public function getAllPermissionsAttribute()
{
    $permissions = $this->getAllPermissions();
    $permission_names = [];

    collect($permissions)->map(function ($permission) use (&$permission_names) {
        $permission_names[] = $permission->name;
    });

    return $permission_names;
}

效果:

file

4年前 评论

@johnlui 是的,@zhouzishu 的方法更好 :smiley:

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!