Question

我正在为我的应用程序使用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。

Answer 1

如果您没有将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!'
})

Spatie，Laravel和VueJs的角色和权限

1 个答案: