Posso
Crafted with
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
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).
