具有Laravel权限的Vue.js [英] Vue.js with Laravel Permission

问题描述

我正在将Laravel Permission API与Vue.JS前端集成.我正在使用 https://github.com/spatie/laravel-permission 库获取Laravel权限.我不明白如何在Vue JS前端中检查权限(在Laravel刀片中，我正在使用@Can来检查权限).

I am in the process of integrating Laravel Permission API with Vue.JS frontend. I am using https://github.com/spatie/laravel-permission library for Laravel Permission. I am not understanding how can I check permission in the Vue JS front End (In Laravel blade I am using @Can to check the permission).

推荐答案

我将执行ajax调用来检查权限，类似这样，但是当然，您需要对其进行修改以满足您的需求.

I will do a ajax call to check for permissions instead , something like this, but of cours eyou need to modify it to cater your needs.

路线:

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

控制器:

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

Vue :(如果您想同步执行此操作)，这是一个简单的示例(Vue全局混合)，您可以将其转换为Vue指令或组件.

Vue: (if you wanna do this synchronously), this is a simple example (Vue global mixin), you can turn this into Vue directive or component.

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

然后每次您想要检查权限时，您都可以做

And then everytime you wanna check permission, you can just do

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

这篇关于具有Laravel权限的Vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！