@permify/vue-permify

@permify/vue-permify

Permify Vue library provides a plugin, vue-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 vue-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>

Documentation

https://docs.permify.co/docs/intro

Contact Us

[e-mail]
[e-mail]

License

Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0