📖 Implementation

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

1import useLicesingManagerAdapter from "sx-licensing-manager";
2
3useLicesingManagerAdapter(Vue, {
4  applicationId: 'your application id',
5  applicationServer: 'the server of the Licensing API',
6})

Your entry point should look like this:

1import Vue from 'vue'
2import App from './App.vue'
3import useLicesingManagerAdapter from "sx-licensing-manager";
4
5Vue.config.productionTip = false
6
7useLicesingManagerAdapter(Vue, {
8  applicationId: 'your application id',
9  applicationServer: 'the server of the Licensing API',
10})
11
12new Vue({
13  render: h => h(App),
14}).$mount('#app')

🔥 Usage

Where validate the user who will log in:

1    this.templateIsReady = await this.$sxLicesingManager.setLicensingPermissions(user) 

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

1    <template v-if="templateIsReady"> 
2      <nav-bar />
3      <div class="columns" id="mail-app">
4        <side-bar />
5        <div class="column is-10 messages hero is-fullheight">
6          <div class="card gray-container">
7            <div class="card-content">
8              <router-view></router-view>
9            </div>
10          </div>
11        </div>
12      </div>
13    </template>

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

1<template>
2  <div>
3    <router-link licensing-permission="'your function code'" to="/user" class="item">
4        <span class="icon">
5            <i class="fa fa-users"></i>
6        </span>
7        <span class="name">Usuarios</span>
8    </router-link>
9  </div>
10</template>

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

1public myFunction(): void {
2    if (this.$sxLicesingManager.hasLicensingPermission('your function code')) {
3        console.log('I am cool');
4    } else {
5        console.log('you does not have permission');
6    }
7}

In the prototype $sxLicesingManager we have: hasLicensingPermission, setLicensingPermissions, getLicensingPermissions

Note

if you use typescript be sure to add the typing

1declare module 'vue/types/vue' {
2  interface Vue {
3    $sxLicesingManager: any
4  }
5}