Permission System

A componentized TypeScript permission system for Vue 3, providing comprehensive permission management capabilities including route permission, menu permission, and button permission.

Features

• ✅ TypeScript Support - Full type safety
• ✅ Vue 3 Composition API - Modern Vue 3 syntax
• ✅ Route Permission - Dynamic route permission management
• ✅ Menu Permission - Dynamic menu generation based on permissions
• ✅ Button Permission - Fine-grained button permission control
• ✅ Configurable - Flexible configuration options
• ✅ No Strong Dependencies - Core functionality doesn't rely on specific UI frameworks

Installation

npm install summer-day-permission-system

Usage

1. Basic Usage

import { PermissionChecker } from "summer-day-permission-system";

// Create permission checker instance
const authNode = new Map([
    ["/admin/projects", ["create", "edit", "delete"]],
    ["/admin/users", ["view", "add"]],
]);

const permission = new PermissionChecker(authNode, {
    pathMapping: {
        "/admin/home": "/admin/projects",
    },
});

// Check permission
const canCreate = permission.auth("create"); // true
const canDelete = permission.auth("delete"); // true
const canViewUsers = permission.auth(["view", "add"]); // true

2. Vue 3 Composition API

Global Configuration

// main.ts
import { createApp } from "vue";
import { providePermission } from "summer-day-permission-system";
import App from "./App.vue";

const app = createApp(App);

// Provide permission instance globally
const authNode = new Map([["/admin/projects", ["create", "edit", "delete"]]]);

providePermission(
    app,
    {
        pathMapping: {
            "/admin/home": "/admin/projects",
        },
    },
    authNode
);

app.mount("#app");

Component Usage

<template>
    <button v-if="canCreate" @click="handleCreate">Create Project</button>
    <button v-if="canEdit" @click="handleEdit">Edit Project</button>
</template>

<script setup lang="ts">
import { usePermission } from "summer-day-permission-system";

const permission = usePermission();

const canCreate = permission.auth("create");
const canEdit = permission.auth("edit");

const handleCreate = () => {
    // Create project logic
};

const handleEdit = () => {
    // Edit project logic
};
</script>

3. Route Processing

import { RouteProcessor } from "summer-day-permission-system";

// Route data
const routes = [
    {
        name: "projects",
        path: "projects",
        title: "Project Management",
        type: "menu",
        menu_type: "tab",
        children: [
            {
                name: "create",
                path: "create",
                title: "Create Project",
                type: "button",
                icon: "el-icon-plus",
            },
            {
                name: "edit",
                path: "edit",
                title: "Edit Project",
                type: "button",
                icon: "el-icon-edit",
            },
        ],
    },
];

// Process routes
const { authNode, buttonInfo, menuRules } = RouteProcessor.processRoutes(
    routes,
    "/admin/"
);

// authNode: Map containing permission nodes
// buttonInfo: Map containing button information
// menuRules: Array containing menu rules

API

PermissionChecker

Constructor

new PermissionChecker(authNode?: Map<string, string[]>, config?: PermissionConfig)

Methods

• auth(name: string | string[]): boolean - Check if user has permission
• isHasPathAuth(path: string): boolean - Check if path has permission
• updateAuthNode(authNode: Map<string, string[]>): void - Update permission nodes
• getAuthNode(): Map<string, string[]> - Get current permission nodes
• updateConfig(config: Partial<PermissionConfig>): void - Update configuration

RouteProcessor

Static Methods

• handleAuthNode(routes: RouteItem[], prefix?: string): AuthNode - Process routes to generate auth nodes
• handleButtonInfo(routes: RouteItem[]): ButtonInfo - Extract button info from routes
• handleMenuRule(routes: RouteItem[], pathPrefix?: string): MenuRule[] - Generate menu rules from routes
• processRoutes(routes: RouteItem[], prefix?: string): RouteProcessResult - Process routes comprehensively

Vue 3 Composables

• createPermission(config?: PermissionConfig): (authNode?: AuthNode) => PermissionInstance - Create permission instance
• usePermission(): PermissionInstance - Use permission instance in component
• **providePermission(app: App, config?: PermissionConfig, authNode?: AuthNode): PermissionInstance ** - Provide permission instance globally

Types

PermissionConfig

interface PermissionConfig {
  isDevelopment?: boolean;
  defaultAuthResult?: boolean;
  pathMapping?: Record<string, string>;
}

RouteItem

interface RouteItem {
  id?: number;
  name: string;
  path: string;
  title: string;
  icon?: string;
  type: 'menu' | 'menu_dir' | 'button';
  menu_type?: 'tab' | 'iframe' | 'link';
  component_path?: string;
  extend?: string;
  keepalive?: number;
  url?: string;
  children?: RouteItem[];
}

Configuration

PermissionConfig

| Option | Type | Default | Description | |--------|------|---------|-------------| | isDevelopment | boolean | false | Whether in development mode | | defaultAuthResult | boolean | true | Default permission result in development mode | | pathMapping | Record<string, string> | {} | Path mapping for permission checking |

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT