具有 Laravel 權限的 Vue.js

Question

我正在將 Laravel Permission API 與 Vue.JS 前端集成。 我正在為 Laravel 權限使用https://github.com/spatie/laravel-permission庫。 我不明白如何在 Vue JS 前端檢查權限（在 Laravel 刀片中，我使用 @Can 檢查權限）。

Answer 1

我會做一個 ajax 調用來檢查權限，就像這樣，但當然你需要修改它以滿足你的需要。

路線：

Route::get('/permission/{permissionName}', 'PermissionController@check');

控制器：

function check($permissionName) {
   if (! Auth::user()->hasPermissionTo($permissionName)) {
        abort(403);
   }
   return response('', 204);
}

Vue：（如果您想同步執行此操作），這是一個簡單的示例（Vue global mixin），您可以將其轉換為 Vue 指令或組件。

Vue.mixin("can", (permissionName) => {
    let hasAccess;
    axios.get(`/permission/${permissionName}`)
        .then(()=> {
            hasAccess = true;
        }
        .catch(()=> {
            hasAccess = false;
        };
    return hasAccess;
});

然后每次你想檢查權限時，你就可以

<el-input v-if="can('write-stuff')"> </el-input>

Answer 2

我確實在做同樣的事情。 我正在考慮添加一個自定義 Vue 指令來檢查 Laravel.permissions 數組。

它甚至可能很簡單

 Vue.directive('can', function (el, binding) {
  return Laravel.permissions.indexOf(binding) !== -1;
})

我沒有測試過這段代碼。 這里只是頭腦風暴。

<button v-can="editStuff">You can edit this thing</button>

我可以通過這種方式持有權限：

window.Laravel = <?php echo json_encode([
                'csrfToken' => csrf_token(),
                'userId' => Auth::user()->id,
                'permissions' => Auth::user()->permissions()->pluck('name')->toArray()
            ]); ?>

Answer 3

只是偶然發現了這個問題，我想分享我發現和實施的內容。

1. 在 spatie/laravel-permission 正在使用的 User 模型上添加訪問器

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

2. 在您的全局頁面或布局頁面上，將訪問者的權限傳遞給 javascript。

    <script type="text/javascript">
       @auth
          window.Permissions = {!! json_encode(Auth::user()->allPermissions, true) !!};
       @else
          window.Permissions = [];
       @endauth
    </script>

3. 在 resources/js/app.js 上創建一個全局指令

    Vue.directive('can', function (el, binding, vnode) {

        if(Permissions.indexOf(binding.value) !== -1){
           return vnode.elm.hidden = false;
        }else{
           return vnode.elm.hidden = true;
        }
    })

在這里，您正在檢查您在指令上提供的權限是否在 laravel 的權限數組上。 如果找到則隱藏元素 else 顯示，這個函數就像一個 v-if。

4. 在您的組件上像這樣使用它 - “add_items”是您的許可

    <button type="button" v-can="'add_items'"></button>

此解決方案來自此，但我使用指令而不是 mixin。 從上面的@Ismoil Shifoev 評論中得到了指令的想法。

Answer 4

你可以在 Vuejs 中使用這種格式來獲取 Laravel 權限：

<div v-if="can('edit post')">
  <!-- Edit post form -->
</div>

<div v-if="is('super-admin')">
  <!-- Show admin tools -->
</div>

向用戶模型添加功能以獲取所有用戶權限和角色，如下所示：

class User extends Authenticatable
{
    // ...

    public function jsPermissions()
    {
        return json_encode([
                'roles' => $this->getRoleNames(),
                'permissions' => $this->getAllPermissions()->pluck('name'),
            ]);
    }
}

將此數據傳遞給 HTML 標頭中的 JavaScript：

<script type="text/javascript">
    window.Laravel = {
        csrfToken: "{{ csrf_token() }}",
        jsPermissions: {!! auth()->check()?auth()->user()->jsPermissions():null !!}
    }
</script>

在app.js文件中添加全局 Vuejs可以檢查用戶權限和檢查用戶角色的功能：

Vue.prototype.can = function(value){
    return window.Laravel.jsPermissions.permissions.includes(value);
}
Vue.prototype.is = function(value){
    return window.Laravel.jsPermissions.roles.includes(value);
}

https://github.com/ahmedsaoud31/laravel-permission-to-vuejs

Answer 5

我會選擇拉爾夫解決方案。 但我發現自己更好地使用。 此函數用於獲取權限。

public function getAllPermissionsAttribute() {
    return Auth::user()->getAllPermissions()->pluck('name');
}

稍微干凈一點，因為我傾向於使用角色而不是每個用戶的特定權限，所以這個解決方案也應該可以工作。