https://github.com/codica2/react-authorized-routes-sample

⚛️ React authorized routes with HOC sample
https://github.com/codica2/react-authorized-routes-sample

hoc react react-router routes

Last synced: 25 days ago
JSON representation

⚛️ React authorized routes with HOC sample

• Host: GitHub
• URL: https://github.com/codica2/react-authorized-routes-sample
• Owner: codica2
• Created: 2020-01-08T15:12:05.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-01-08T15:13:26.000Z (about 5 years ago)
• Last Synced: 2024-11-07T04:30:29.412Z (3 months ago)
• Topics: hoc, react, react-router, routes
• Homepage:
• Size: 1.95 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
React authorized routes with HOC sample




  

  



## Description

This is an example of the `HOC` for managing autorized, unauthorized, common etc. routes in you react application.

Firstly, we create and export a few constants, we are going to use them to define the type of a route.

```js

export const SHARED = "SHARED";

export const LOGGED = "LOGGED";

export const UNLOGGED = "UNLOGGED";

```

`SHARED` - means that both autorized and unauthorized users can get access to the current route 


`LOGGED` - only autorized users 


`UNLOGGED` - only unauthorized users 


Also we should define a current user state, in our example has been used React Context API, particularly `useContext` hook but of course, you may use anything you want instead (Redux, MobX, etc.).

```js

const { user } = useContext(AuthContext);

const logged = user ? LOGGED : UNLOGGED;

```

Then we set a case when a user must be redirected to the login page otherwise we just do nothing and return the actual component that has been passed as an argument.

```js

if (auth !== SHARED && auth !== logged) {

  return ;

}

return ;

```

Here is a full example:

```js

export const SHARED = 'SHARED';

export const LOGGED = 'LOGGED';

export const UNLOGGED = 'UNLOGGED';

export default auth => Component => props => {

  const { user } = useContext(AuthContext);

  const logged = user ? LOGGED : UNLOGGED;

  if (auth !== SHARED && auth !== logged) {

    return 

  }

  return 

```

## Usage

In order to use it at first invocation, we pass the `auth` constant and then we must pass the actual component.

```js

import Homepage from '../pages/home';

import Login from '../pages/login';

import Register from '../pages/register';

import Profile from '../pages/profile';

const shared = auth(SHARED);

const logged = auth(LOGGED);

const unlogged = auth(UNLOGGED);

const Auth = {

  Homepage: shared(Homepage),

  Login: unlogged(Login),

  Register: unlogged(Register),

  Profile: logged(Profile),

};

const App = () => (

  

    

    

    

    

  

);

```

Or if you prefer declatative object-based approach with `react-router`:

```jsx

// ...

const routes = [

  {

    path: '/homepage',

    auth: shared,

    component: Homepage,

  },

  {

    path: '/login',

    auth: unlogged,

    component: Login,

  },

  // ...

];

```

## About Codica

[![Codica logo](https://www.codica.com/assets/images/logo/logo.svg)](https://www.codica.com)

We love open source software! See [our other projects](https://github.com/codica2) or [hire us](https://www.codica.com/) to design, develop, and grow your product.