Skip to content

Seamlessly integrate navigation permissions in Vue Router using CASL for Vue.js applications.

License

Notifications You must be signed in to change notification settings

abbatistam/vuerify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Router Authorization Library

This library provides seamless integration between Vue Router and CASL to manage navigation permissions based on defined rules. It allows you to easily set up and enforce authorization rules for your Vue.js applications, ensuring that users can access only the routes they are authorized to.

Features

  • Define permissions using CASL rules, specifying actions and subjects.
  • Associate permissions with Vue Router routes using meta fields.
  • Automatically restrict access to routes based on user permissions.
  • Dynamically update router configuration and permissions at runtime.
  • Generate authorized routes based on permissions for route rendering and navigation control.
  • Simple and flexible API for managing authorization in your Vue.js applications.

Installation

You can install the library via npm or yarn: Soon...

Usage

  1. Define your permissions using CASL rules.
  2. Define your Vue Router routes and associate permissions using meta fields.
  3. Initialize the RouterAuthorization class with your configuration.
  4. Use the generated router for navigation, and the library will handle authorization automatically.
import { RouterAuthorization, Route, Rule } from 'vue-router-authorization';
import { type Rule } from 'casl';

// Define your permissions using CASL rules
const permissions: Rule[] = [
  { actions: 'view', subject: 'about' },
  { actions: 'edit', subject: 'protected' },
];

// Define your Vue Router routes
const routes: Route[] = [
  { name: 'home', path: '/', component: HomeView },
  { name: 'about', path: '/about', component: AboutView, meta: { subject: 'about', action: 'view' } },
  { name: 'protected', path: '/protected', component: ProtectedView, meta: { subject: 'protected', action: 'view' } },
];

// Initialize RouterAuthorization with configuration
const routerConfig = { routes, permissions, unauthorizedRoute: '/unauthorized' };
const routerAuth = new RouterAuthorization(routerConfig);
const router = routerAuth.getRouter();

// Use the router for navigation in your Vue.js application

License

This project is licensed under the MIT License. See the LICENSE file for details.

About

Seamlessly integrate navigation permissions in Vue Router using CASL for Vue.js applications.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published