Crafted with :heart: by Mobix Software Studio to React.js applications.

Posso it's a library to control permissions to routes, components and private routes.

Install

// with npm:
npm install --save @mobixsoftwarestudio/posso

// with yarn:
yarn add @mobixsoftwarestudio/posso

Dependencies

• react-router-dom

Usage

Provider

const permissionsOfApp = ['page/home'];
const isAuthenticated = () => localStorage.getItem('exampleToken') == null;

<PossoProvider
  permissions={permissionsOfApp}
  isAuthenticated={isAuthenticated()}
  notAuthenticatedRedirect={<Redirect to="/" />} authenticatedRedirect="/home"
>
  {...}
</PossoProvider>

Route

import React from 'react';
import { Switch } from 'react-router-dom';
import { PossoRoute } from '@mobixsoftwarestudio/posso';

import Home from './screens/Home';
import Login from './screens/Login';
import Admin from './screens/Admin';

const NotAllowedComponent = () => (
  <div>
    <h2>Not allowed page.</h2>
  </div>
);

export default Routes = () => (
  <Switch>
    <PossoRoute
      exact
      path='/'
      component={Login}
    />
    <PossoRoute
      path='/home'
      exact
      isPrivate
      permissions={['page/home']}
      render={() => <Home />}
    />
    <PossoRoute
      path='/admin'
      exact
      isPrivate
      permissions={['page/admin']}
      component={Admin}
      notAllowedComponent={<NotAllowedComponent />}
    />
  </Switch>
);

Component

const AlternateView = () => (
  <h2>Show to everyone.</h2>
);

<CheckPermission
  permissions={['page/home']}
  alternateView={<AlternateView />}
>
  <span>Authorized component</span>
</CheckPermission>

API

<PossoProvider />

The component accepts the following props:

|Name|Type|Description |:--:|:-----|:-----| |isAuthenticated|boolean|isAuthenticated used to control authenticated routes. |notAuthenticatedRedirect|JSX.Element| notAuthenticatedRedirect used to render/redirect a page when user is not authorized. |authenticatedRedirect|string| authenticatedRedirect used to redirect a page when user is logged and access not private page. |permissions|string[]| permissions used to wrap all project with all permissions of user. |authorizationStrategy|func| authorizationStrategy used to define your own rule to check permissions.

<PossoRoute />

The component accepts the following props:

|Name|Type|Description |:--:|:-----|:-----| |isPrivate|boolean|Is used to refer a route that needs authentication. |notAllowedComponent|JSX.Element| It is used to show a custom component when the user is not allowed to view a specific page. |permissions|string[]| It is used to say what permissions are required to view the page./ |authorizationStrategy|func| authorizationStrategy used to define your own rule to check permissions.

<CheckPermission />

The component accepts the following props:

|Name|Type|Description |:--:|:-----|:-----| |permissions|string[]| It is used to say what permissions are required to view the component. |authorizationStrategy|func| authorizationStrategy used to define your own rule to check permissions.

License

Copyright (c) 2020 Mobix Software Studio.

Licensed under The MIT License (MIT).