在 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 協議》，轉載必須註明作者和本文連結