rbac-adapter

📖 Implementation

Copy the following code in the entry point of your application for example: main.ts or main.js.

import useRbacAdapter from "rbac-adapter";

useRbacAdapter(Vue, {
  applicationId: 'your application id',
  groupId: "your group id",
  applicationServer: 'the server of the SLM API from where your are trying to get the translations',
})

Your entry point should look like this:

import Vue from 'vue'
import App from './App.vue'
import useRbacAdapter from "rbac-adapter";

Vue.config.productionTip = false

useRbacAdapter(Vue, {
  applicationId: 'your application id',
  groupId: "your group id",
  applicationServer: 'the server of the SLM API from where your are trying to get the translations',
})

new Vue({
  render: h => h(App),
}).$mount('#app')

🔥 Usage

Where validate the user who will log in:

The method setRoles receives an user model with the following properties: { id: string, email: string, name: string, lastName: string, adGroupIds: string }.

If the user is not in the rbac already then the method setRoles will create it and then you just need to go to the rbac application and assign the roles to the user.

    this.templateIsReady = await this.$sxRBAC.setRoles(user) 

Create the variable templateIsReady and do not condition the render of the app with this

    <template v-if="templateIsReady"> 
      <nav-bar />
      <div class="columns" id="mail-app">
        <side-bar />
        <div class="column is-10 messages hero is-fullheight">
          <div class="card gray-container">
            <div class="card-content">
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </template>

In your vue template you need to put the directive v-permission and the function code declared in SX-RBAC as parameter

<template>
  <div>
    <router-link v-permission="'your function code'" to="/user" class="item">
        <span class="icon">
            <i class="fa fa-users"></i>
        </span>
        <span class="name">Usuarios</span>
    </router-link>
  </div>
</template>

In the case of wanting to validate the permissions from the code

public myFunction(): void {
    if (this.$sxRBAC.hasPermission('your function code')) {
        console.log('I am cool');
    } else {
        console.log('you does not have permission');
    }
}

In the prototype $sxRBAC we have: hasPermission, setRoles, getRoles, createUser, migrateUsers

Note

if you use typescript be sure to add the typing

declare module 'vue/types/vue' {
  interface Vue {
    $sxRBAC: any
  }
}