CASL-Vue Can 组件为授权和未授权用户隐藏组件

Question

我有一个组件，如果用户有权限我想显示它，但 Can 组件似乎隐藏了该组件而不管用户权限如何。

以下是我的ability.js模块

import {Ability, AbilityBuilder} from "@casl/ability";

export default function defineAbilityFor(hasRole) {
    const { can, cannot, build } = new AbilityBuilder(Ability)
    if (hasRole !== undefined) {
        console.log(hasRole)
        can('manage', 'all')
        can('create', 'all')
    } else {
        can('read', 'all')
        cannot('create', 'all')
    }

    return build()
}

我将城堡添加为我的 main.js 如下：

const app = createApp(App)
app.use(router)
app.use(store)
app.use(abilitiesPlugin, ability(), {
    useGlobalProperties: true
})
app.component(Can.name, Can)
app.mount('#app')

下面是我需要进行权限检查的组件。

<template>
  <div class="d-flex flex-column px-4">
    <div class="d-flex justify-content-end">
      <Can I="create" an="Institution">
        <button class="btn btn-sm btn-outline-success" @click="addInst = true">{{ action }}</button>
      </Can>
    </div>
    <ListInstitutions v-if="addInst === false"/>
    <Can I="create" an="Institution">
      <AddInstitution v-if="addInst === true" @created="closeModal"/>
    </Can>
  </div>
</template>

<script>
import AddInstitution from "@/components/institution/AddInstitution";
import ListInstitutions from "@/components/institution/ListInstitutions";
import { Can } from "@casl/vue";

export default {
  name: 'InstitutionPage',
  components: {AddInstitution, ListInstitutions, Can},
  data() {
    return {
      addInst: false,
      action: this.addInst ? 'Institutions' : 'Add Institution'
    }
  },
  methods: {
    closeModal() {
      this.addInst = false
    }
  }
}
</script>

Answer 1

非常感谢@Sergii Stotskyi。

我最终在 definedAbility.js 文件中定义能力如下：

import { AbilityBuilder, Ability } from "@casl/ability";

export default function defineAbilityFor(userRole) {
  const { can, cannot, build } = new AbilityBuilder(Ability);

  if (userRole === 'user') {
    can ('read', 'Institution')
    cannot(['create', 'update'], 'all')
  }

  if (userRole === 'reg_admin_stroke' || userRole === 'admin') {
    can('manage', 'all')
  }

  return build()
}

然后在每个需要能力的组件中，在 setup() 方法中，我按如下方式创建能力：

...
import definedAbility from '@/services/definedAbility.js'

...
const ability = definedAbility(userRole.value)

return {
  ability
}

并且在我的模板中做了类似的事情：

<div v-if="ability.can('create', 'Institution')">
   <button class="btn btn-sm btn-outline-success"                           @click="addInst = true">{{ action }}</button>
</div>

CASL-Vue Can 组件为授权和未授权用户隐藏组件

CASL-Vue Can component hides components for both authorized and unauthorized user

casl

vuejs3