Spatie、Laravel 和 VueJs 的角色和权限答案

【问题标题】：Roles and Permissions with Spatie, Laravel and VueJsSpatie、Laravel 和 VueJs 的角色和权限
【发布时间】：2020-11-01 15:38:03
【问题描述】：

我在我的应用程序中使用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.

【问题讨论】：

标签： laravel vuejs2 laravel-7

【解决方案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!'
})

【讨论】：