我正在为我的应用程序使用Laravel
和VueJs
,并且我想集成一个有关角色和权限的部分,为此我正在使用Spatie。
在应用程序中,每个用户可以具有多个角色(例如:管理员,老师,编辑者),并且每个角色都有一定的权限。
我尝试了here中的一些问题,这是Shuyi的答案,但出现了一些错误。
问题是如何检查VueJS
中的角色?
控制器
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class TeachersController extends Controller
{
function check($permissionName) {
if (! Auth::user()->hasPermissionTo($permissionName)) {
abort(403);
}
return response('', 204);
}
}
web.php
Route::group(['middleware' => 'auth'], function () {
Route::get('/permission/{permissionName}', 'PermissionController@check');
});
app.js
Vue.mixin("can", (permissionName) => {
let hasAccess;
axios.get(`/permission/${permissionName}`)
.then(() => {
hasAccess = true;
})
.catch(() => {
hasAccess = false;
});
return hasAccess;
});
App.vue
<template>
<button v-if="can('write-stuff')">Just a test!</button>
</template>
在实例上未定义但引用了属性或方法“ can” 在渲染期间。确保此属性是反应性的,无论是在 数据选项或基于类的组件,方法是初始化 属性。看到: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
答案 0 :(得分:0)
如果您没有将mixin定义为全局,则必须将其注入到要使用的组件中,如 Vue Mixins docs
中所述每个组件注册:
// define a mixin object var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin var Component = Vue.extend({ mixins: [myMixin] })
全局注册(将在所有组件中提供)
// inject a handler for `myOption` custom option Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' })