@permify/vue-permify NPM

@permify/vue-permify

npm

Permify Vue library provides a plugin, js-router middleware, and components for controlling access checks throughout your entire Vue application via Permify API.

Installation

Use npm to install:

npm install @permify/vue-permify

How to use

`isAuthorized(policy, action)`

isAuthorized is a helper function that returns a Promise which resolves with true if the user is authorized for action with the given parameters, if not it resolves with false.

You should call it inside a conditional logic structure; maybe in conditionaly rendering UI or a simple if check for fetching protected information.

Parameters

policyName (mandatory) \ Custom Permify Policy name.
Action (mandatory) \ Custom Policy Action.
resourceId (optional) \ Id of the Resource, mandatory if any resource used or accessed when creating Rule/Rules.
resourceType (optional) \ Type or name of the Resource, mandatory if any resource used or accessed when creating Rule/Rules.

Using isAuthorized function:

<template>
  <div v-if="isAuthorized">
   /*  protected component, UI Layer etc. */
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAuthorized:  false,
    };
  },
  async created() {
        //post-edit passed as policyName parameter
        if (await this.$permify.isAuthorized('posts', 'edit', '91', 'post')) {
             // request protected info from server
        }
    }
};
</script>

`routeGuard`

routeGuard is a js-router middleware function that you can use to control the access management of your pages.

Props

policyName (mandatory) \ Custom Permify Policy name.
action (mandatory) \ Custom Policy action.
resourceId (optional) \ Id of the Resource, mandatory if any resource used or accessed when creating Rule/Rules.
resourceType (optional) \ Type or name of the Resource, mandatory if any resource used or accessed when creating Rule/Rules.
redirectTo (mandatory) \ redirect url if user has not authorized to view the page (mandatory)

<template>
    /*  create contact UI */
</template>

<script>
import { routeGuard } from "@permify/vue-permify";

export default {
    beforeRouteEnter: routeGuard({
        policyName="'contacts'"
        action="'create'"
        redirectTo: "/unauthorized",
    })
}
</script>