如何使用 vue-browser-acl 在我的 Vue 项目中实现 ACL？

Posted 2023-02-23

【中文标题】如何使用 vue-browser-acl 在我的 Vue 项目中实现 ACL？

【英文标题】：How can I implement ACL into my Vue project using vue-browser-acl?

【发布时间】：2020-07-17 22:07:51

【问题描述】：

使用这个 ACL library for Vue 我一直在尝试使用以下代码在 2 个文件中将 ACL 实现到 my Vue-based project：

ma​​in.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Acl from "vue-browser-acl";

const user =  name: "Raj", role: "normal" ;

Vue.use(Acl, user, acl => 
  acl.rule("normal", "pages", user => user.role == "normal");
);

new Vue(
  router,
  store,
  render: h => h(App)
).$mount("#app");

pages/PageStats.vue

<template>
  <div>
    <h1 v-role:normal>This is the stats page authenticated</h1>
    <h1>This is the stats page unauthenticated</h1>
  </div>
</template>

<script>
export default ;
</script>

<style scoped></style>

但是，即使用户拥有role: "normal"，我也看不到<h1 v-role:normal> 标签。我做错了什么？

【参考方案1】：

该库的文档相当混乱，但我认为要使用 v-role 指令，您需要 configure a global rule。

// remove the "pages" subject
acl.rule("normal", ( role ) => role === "normal");

演示~https://codesandbox.io/s/upbeat-lake-p1ndn

---

为了使用字符串主题，您必须遵守一些字符串大小写规则。要么使用 "Pages" 这样的 Pascal 大小写名称，要么将 ACL 配置为使用普通大小写模式

Vue.use(Acl, user, acl => 
  acl.rule("normal", ( role ) => role === "normal");
  acl.rule("view", "pages");
, 
  caseMode: false // ? configure plain case mode
);

<div v-role:normal>Normal role can view</div>
<div v-can:view="'pages'">Can view pages</div>

见https://github.com/mblarsen/vue-browser-acl#casemode

【讨论】：

谢谢你，这确实有效。但是，如果我想使用诸如“页面”或“帖子”之类的主题怎么办？

@Raj 你不能为此使用v-role。您需要使用v-can，例如v-can:view="'pages'"

没关系，但是当我尝试使用v-can 使用我原来的问题示例时，它仍然不起作用。

@Raj 我发现了你的问题并更新了我的答案

我仍然不完全明白我应该如何使用所谓的subjects，例如如何使用Page或“page”或“Page”或“pages”或“Pages” ，但总的来说，你确实回答了我原来的问题，这个问题让我困了 天。谢谢！