如何使用 vue-browser-acl 将 ACL 实施到我的 Vue 项目中？

Question

使用此 ACL library for Vue I have been trying to implement ACLs into my Vue-based project 在 2 个文件中使用以下代码：

main.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> 标签。我做错了什么？

Answer 1

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

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

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

为了使用字符串主题，您似乎必须遵守一些字符串大小写规则。使用 Pascal 大小写的名称，如 "Pages" 或将 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

如何使用 vue-browser-acl 将 ACL 实施到我的 Vue 项目中？

How can I implement ACL into my Vue project using vue-browser-acl?

acl

vue.js

vue-router

vue-component

vuex