React-route-locker NPM

Route Locker

Ultimate React Route Authriozation System

Installation

Yarn Package Manager (Recommended)

yarn add react-route-locker

NPM Package Manager

npm intall react-route-locker

Features

7 Modes.
5 Core Modes and 2 Universal Modes.
Role Based Public Routes and Role Redirect System.
Unlimited Roles Support.
Block Unauthorised Browsers. (Trusted and Recommendations Browsers : 8)
react-router-dom V6 Support.

Coming Soon !

Unlimited Custom Variable Support.
Cutom Component Support in react-router-dom V6.
Debug Mode For Developers...
Auto Apply React Error Boundaries.
react-router-dom V5 Support.
init() Function to less object code.

Usage

V6 React Router Dom

import { RouteLocker } from "react-route-locker";

<Route element={<RouteLocker Properties={[PublicRouter]} />}>
  <Route path={`path`} element={<Component />} />
</Route>

OR Coming Soon !

import { RouteLocker } from "react-route-locker";

<RouteLocker Properties={[PublicRouter]} path={`path`} element={<Component />} />

V5 React Router Dom Coming Soon !

import { RouteLocker } from "react-route-locker";

<RouteLocker Properties={[PublicRouter]} component={<Login />} path="*" />

Versions

Public Latest Version : 1.0.0
Private Latest Version : 1.0.0
Note : Private Versions are been promoted to Public Versions after testing and fixing bugs.
Dev Latest Version : 1.0.0
Note : Dev Versions is only for live testing version it may be contain bugs and errors.

	Public	Private	Dev
V1
V2

Snippets

PublicRouter

const PublicRouter = {
  User_State: {
    Auth: Auth,
    Role: Role,
  },
  mode: "onlyAuth",
  Redirect: {
    mode: "RoleRedirect",
    useRoleRedirect: {
      Links: ["/admin/Dashboard", "/user/home", "/snippet/home", `/vip/home`],
      Roles: ["admin", "user", "dev", "vip"],
    },
  },
  useAuth: {
    enable: true,
    AntiAuth: true,
  },
};

PrivateRouter

const UserRouter = {
  User_State: {
    Auth: Auth,
    Role: Role,
  },
  mode: "useBoth",
  Redirect: {
    mode: "Normal",
    Link: `/auth/login`,
  },
  useBoth: ["onlyAuth", "onlyRole"],
  useAuth: {
    enable: true,
  },
  useRole: {
    enable: true,
    Expect_Role: "user",
  },
};