Как я могу внедрить ACL в мой Vue проект, используя vue -browser-acl? - PullRequest
Новая
       19

Как я могу внедрить ACL в мой Vue проект, используя vue -browser-acl?

1 голос
/ 06 апреля 2020

Используя эту библиотеку ACL для Vue Я пытался внедрить ACL в мой Vue проект на основе , используя следующий код в 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>. Что я делаю не так?

1 Ответ

1 голос
/ 06 апреля 2020

Документация для этой библиотеки довольно запутанная, но я думаю, что для использования директивы v-role вам необходимо настроить глобальное правило . 

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

Demo ~ 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

...