Spatie,Laravel和VueJs的角色和权限

时间:2020-07-12 08:43:39

标签: laravel vuejs2 laravel-7

我正在为我的应用程序使用LaravelVueJs,并且我想集成一个有关角色和权限的部分,为此我正在使用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

1 个答案:

答案 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!'
})