Simple React authorization mechanism Translated 100%

Most applications need authentication and authorization mechanisms. When the authentication mechanism confirms that some entities are legitimate users, the authorization mechanism will determine whether users are allowed to perform these operations according to their roles and permissions

In most cases, we usually do not need special modules or libraries to handle authorization. Most tool functions are sufficient. The authentication or authorization solution provided by you in the application can be changed. You may decide to put the user status in Redux for management, or you may create a special module, etc

Let's see how to handle a simple role-based authorization mechanism in React

Please remember that the following shows the identity authorization of the client, which is easy to bypass. The authorization on the client is more related to the user experience than security. You need to ensure that the roles on the server side are secure

Suggested courses

Web Bos full stack advancement React and GraphQL
 

Simple authorization mechanism

Suppose we have a user object, which is usually obtained by calling a terminal after logging in. It has the following structure

 const user = {   name: 'Jackator',   // ...   roles: ['user'],   rights: ['can_view_articles'] };

Users have several permissions that can be grouped into roles. For your application, you may only need roles, or permissions, or both. That's not a problem. REST APIs may give you permissions nested in roles, which is not a problem. Please remember that you need to adjust the solution according to your needs. The most important thing is that we have a user object.

Then we create a auth.js There are some tools and methods in the file that may help us check the user's authorization

auth.js

 export const isAuthenticated = user => !! user; export const isAllowed = (user, rights) =>   rights.some(right => user.rights.includes(right)); export const hasRole = (user, roles) =>   roles.some(role => user.roles.includes(role));

By using the some and includes Method, we checked whether the customer has at least one permission or role of UFIDA, which should be sufficient to perform some basic permission checks

Because user objects can be saved anywhere, we can pass them to functions as parameters, taking Redux as an example.

We finally created a simple React component, which uses auth.js In order to display different parts of the interface according to conditions

App.js

 import React from 'react'; import { render } from "react-dom"; import { hasRole, isAllowed } from './ auth'; const user = {   roles: ['user'],   rights: ['can_view_articles'] }; const admin = {   roles: ['user', 'admin'],   rights: ['can_view_articles', 'can_view_users'] }; const App = ({ user }) => (   <div>     {hasRole(user, ['user']) && <p>Is User</p>}     {hasRole(user, ['admin']) && <p>Is Admin</p>}     {isAllowed(user, ['can_view_articles']) && <p>Can view Articles</p>}     {isAllowed(user, ['can_view_users']) && <p>Can view Users</p>}   </div> ); render(   <App user={user} />,   document.getElementById('root') );

We use the&&logic symbol to evaluate the short circuit. Here, if hasRole perhaps isAllowed The function returns true, and the content behind the&&symbol will be rendered.

Try to change the user to admin, and you will see that the admin related interface will be displayed

Conditional routing

If you use React Router , you can use the same method to render routes according to conditions:

 import React from 'react'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; const App = ({ user }) => (   <BrowserRouter>     <Switch>       {hasRole(user, ['user']) && <Route path='/user' component={User} />}       {hasRole(user, ['admin']) && <Route path='/admin' component={Admin} />}       <Route exact path='/' component={Home} />     </Switch>   </BrowserRouter> );

React Router To make the declaration and routing combination of Route components easy, we can use it: if<Route> Components via hasRole The verification of is rendered, Route Will be Router addition and implementation