npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

validate-permission

v0.0.16

Published

用户权限校验,支持react(函数式)调用,vue2/vue3,vue指令等方式调用

Downloads

105

Readme

Permission Validation Tool: validate-permission

中文文档

validate-permission is a versatile permission validation library that provides developers with a flexible and efficient way to check user permissions. This tool not only supports functional calls in React but is also compatible with Vue's prototype chain calls and custom directives, making it adaptable to various development scenarios and needs.

Installation Guide

Through the npm package manager, you can easily integrate validate-permission into your project. Simply run the following command in the root directory of your project to complete the installation:

npm install --save validate-permission

API Overview

validate-permission offers a concise API interface, making permission management straightforward and intuitive. The following are its main exported methods:

import { setPermissions, getPermissions, validate, install, directive } from 'validate-permission';

setPermissions

This method is used to set the user's permission set and is a prerequisite step for all permission checking methods. You need to ensure that you have set the correct permission set for the user through this method before calling any validation methods. Of course, you can also leave this method uncalled, but you will need to pass in additional permission set parameters each time you call the permission check method

use setPermissions

import { setPermissions, validate } from 'validate-permission';
const permissions = ['USER.LIST', 'USER.ADD', 'USER.EDIT', "USER.DELET"];
setPermissions(permissions);
// Whether have permissions of user list
validate.is('USER.LIST');
// Whether have all permissions of user
validate.all(['USER.LIST', 'USER.ADD', 'USER.EDIT', "USER.DELET"]);
// Whether have add or edit permissions of user
validate.oneOf(['USER.ADD', 'USER.EDIT']);
// Whether have two permissions of add or edit or delete user
validate.atLeast({
    value: ['USER.ADD', 'USER.EDIT', 'USER.DELETE'],
    n: 2
});

not use setPermissions

import { setPermissions, validate } from 'validate-permission';
const permissions = ['USER.LIST', 'USER.ADD', 'USER.EDIT', "USER.DELET"];
// Whether have permissions of user list
validate.is('USER.LIST', permissions);
// Whether have all permissions of user
validate.all(['USER.LIST', 'USER.ADD', 'USER.EDIT', "USER.DELET"], permissions);
// Whether have add or edit permissions of user
validate.oneOf(['USER.ADD', 'USER.EDIT'], permissions);
// Whether have two permissions of add or edit or delete user
validate.atLeast({
    value: ['USER.ADD', 'USER.EDIT', 'USER.DELETE'],
    n: 2
}, permissions);

getPermissions

When you need to use the user's permission set in custom logic, this method conveniently retrieves the current user's permission list.

install

This method is specifically designed for Vue integration, allowing you to directly use the use method to access permission validation functionality within a Vue application.

directive

Provides a custom directive for Vue, enabling direct use of permission validation functionality within Vue templates.

validate

This is a set of functional call methods suitable for React or other functional frameworks, offering various validation methods:

  • validate.is(permission): Checks if the user has a specific permission.
  • validate.all(permissionsArray): Checks if the user has a set of permissions and all permissions must match.
  • validate.atLeast(options): Checks if the user has at least n permissions from a set.
  • validate.oneOf(permissionsArray): Checks if the user has at least one permission from a set.
import { validate } from 'validate-permission';

// Check user permissions
console.log('Has user list permission:', validate.is('USER.PAGE'));
console.log('Has user add and edit permissions:', validate.all(['USER.ADD', 'USER.EDIT']));

// Check if the user has at least two permissions from a group
console.log('Has at least two of user add, edit, and delete permissions:', validate.atLeast({
    value: ['USER.ADD', 'USER.EDIT', 'USER.DELETE'],
    n: 2
}));

// Check if the user has any one permission from a group
console.log('Has user add or edit permission:', validate.oneOf(['USER.ADD', 'USER.EDIT']));

Usage Examples

Setting User Permission Set

Before using the validate method, you need to set the user's permission set. This is usually done after a user logs in and permission data is obtained from the server:

import { setPermissions } from 'validate-permission';

// Assumed permission set obtained from the server
const permissions = ['USER.PAGE', 'USER.ADD', 'USER.EDIT', 'USER.DELETE'];

// Set the current user's permission set
setPermissions(permissions);

Retrieving User Permission Set

When custom permission validation logic is needed, you may need to retrieve the user's permission set:

import { getPermissions } from 'validate-permission';

// Retrieve and print the current user's permission set
console.log('Current user permission set:', getPermissions());

Vue Integration

Custom Directive Registration

In a Vue project, you can register the validate-permission directive as a global directive to use in templates:

import Vue from 'vue';
import { directive } from 'validate-permission';

// Register global directive
Vue.directive('permission', directive);

Then, in Vue components, you can use it like this:

<template>
    <!-- Use custom directive for permission validation -->
    <button v-permission:is="'USER.PAGE'">User List Permission</button>
    <button v-permission:all="['USER.PAGE', 'USER.EDIT']">User List Permission</button>
    <!-- More permission validation methods -->
</template>

notice: v-permission and v-permission:is are equivalent

Direct Registration of Built-in Methods

Alternatively, you can directly use the built-in methods provided by validatePermission:

import Vue from 'vue';
import { install } from 'validate-permission';

// Use built-in methods
Vue.use(install);
// By default, permission is used as the command name, and v-permission is used directly
// By default, $permission is used as the instance method name, and this is $permission directly when used

// Alternatively, you can manually specify the directiveKey and instanceKey
Vue.use(install, {
    directiveKey: 'validate-permission',
    instanceKey: '$validatePermission',
});

In Vue components, you can directly access the permission validation functionality through this.$permission, also you can use v-permission:

<template>
    <!-- Use built-in methods for permission validation -->
    <button v-permission:is="{ value: 'USER.PAGE' }">User List Permission</button>
    <!-- More usage of built-in methods -->
</template>

<script>
export default {
    methods: {
        checkPermission() {
            // Use this.$permission for permission validation
            console.log('Has user list permission:', this.$permission.is('USER.PAGE'));
        }
    }
}
</script>

React or Functional Calls

In React or other frameworks that support functional programming, you can use validate-permission like this:

import { validate } from 'validate-permission';

// Check user permissions
console.log('Has user list permission:', validate.is('USER.PAGE'));
console.log('Has user add and edit permissions:', validate.all(['USER.ADD', 'USER.EDIT']));
// More usage of functional calls

The validate-permission tool provides developers with strong support in permission management with its flexibility and ease of use. Whether it's functional programming in React or creating complex permission directives in Vue, it can meet your needs.