This is the 5th original article of Big Ice 2021, work with Big Ice on the front end!! 💪

Writing in the front

Still remember in my entry for a short time, the first time to contact the company’s large projects, the project authority to me very confused. Probably is my logical thinking is not strong enough, suddenly contact new way of thinking always can’t turn. However, hard work pays off. Relying on the guidance of seniors and my own little bit of exploration, I finally have a basic grasp of the overall process of authority (front end).

Now looking back, the front end of the authority management is not difficult, like a key to open a lock, as long as the one-to-one logical relationship can be done well. Because the idea is similar, so the implementation of the code is much the same, so this article is mainly based on text and logic diagram.

Today to talk about the project authority this piece, as far as possible to talk about some simple, so that the front small white can understand, but also detailed permission permission permission permission management ideas, welcome to discuss better methods, also hope to throw a tile to introduce jade, can have a god to point out the shortcomings and better improvement methods. 😜

What is permission management

In simple terms, different users have different permissions:

User A enters the page, and there are two options in the page: add, find,

User B enters the page, and there are four options: add, Find, Modify, and Delete.

User C enters the page. The page displays a message indicating that user C has insufficient permission. The page is displayed three seconds later

So if we have 100 users, are we going to give them 100 sets of permissions??

Of course not, users do not directly correspond to permissions, users are actually corresponding to roles.

In other words, users correspond to roles, and roles correspond to permissions. If we have a hundred users, but they have different levels, the boss has all the permissions, the manager has 80%, the team leader has 50%, and the staff has 20%.

So we only need four roles: the boss has full permissions, the manager has 80% permissions, the leader has 50% permissions, and the employee has 20% permissions.

Users of different levels can have different permissions as long as they correspond to the four roles.

It is worth noting that:

The corresponding roles of users and roles can be one-to-many. A user can have multiple roles. For example, xiao Ming is a manager, but he may temporarily work as a team leader, so his corresponding roles are manager + team leader.

A role does not have only one permission. The role may have all the permissions (such as adding, deleting, modifying, and querying) or only some of the permissions (such as adding, deleting, modifying, and querying).

The above description could be changed to this:

User A enters the page. The corresponding role of user A is employee. When all employee roles enter the page, the page will be added.

When user B enters the page, the corresponding role of user B is group leader. When all group leader roles enter the page, there are four options in the page: add, Find, Modify and delete.

When user C enters the page, user C does not have a role. If no user enters the page, the system displays a message indicating that user C has insufficient permission. After 3 seconds, the page is displayed

Logical diagram of rights management

Text description may not be in place, let’s use the form of flowchart to more intuitive performance of the rights management logic.

uPage permission logic diagram

In route interception, determine whether the current user has the corresponding page route permission.

★ Function permission logic diagram

Before rendering the page, judge whether the current user has the permission of the current page function, and decide whether to render.

The back-end needs to perform secondary authentication on the permission to avoid misoperations caused by page rendering errors or caching problems.

★ Logical diagram for data permission sharing

Data permission sharing essentially adds a temporary role, which can be added to the shared.

At the same time, temporary roles should record their creation time, expiration time, ID of the sharer and ID of the sharer to facilitate the later statistical tracing.

Permission management code implementation

The code is generally implemented using both routing interception and request interception, because the code structure may vary from project to project, so the following code is an extension of the idea, and cannot be copied directly into the project

 // Route interception

 // Name Indicates the route to the destination
 // access Array of user permissions
 // routes Route list
 const canTurnGo = (name, access, routes) = > {
	const routePermission = (list) = > {
		return list.some(item= > {
			if (item.children && item.children.length) {
				return routePermission(item.children)
			} else if (item.name === name) {
				return hasAccess(access, item)
			}
		})
	}
	return routePermission(routes)
 }
 ...
 
 // Request interception
 // The method to call when intercepting an HTTP status code other than 200
 const errorHandler = function(error) {
    const codeMap = {
        200: 'The server successfully returned the requested data'.201: 'New or modified data successfully'.202: 'A request has been queued in the background (asynchronous task)'.204: 'Data deleted successfully'.400: 'The request was made in error. The server did not create or modify data.'.401: 'User does not have permissions (incorrect token, username, password)'.403: 'The user is authorized, but access is denied'.404: 'The request was made for a record that does not exist and the server has not acted on it'.406: 'Requested format not available'.410: The requested resource is permanently deleted and will not be retrieved..422: 'A validation error occurred while creating an object'.429: 'Requests exceed day limit'.500: 'Server error occurred, please check the server'.502: 'Gateway error'.503: 'Service unavailable, server temporarily overloaded or maintained'.504: 'Gateway timeout',}const {response} = error
    if (response) {
        // Obtain the error information corresponding to the HTTP status code
        const errorText = codeMap[response.status] || response.statusText
        // If a status code is to perform a special operation, then:
        if(status === 403) {throw new Error(errorText)
        }else{
            throw new Error(errorText)
        }
    } else {
        notification.error({
            description: 'Your network is abnormal and cannot connect to the server'.message: 'Network exception'})},return
}
Copy the code

conclusion

Like this kind of permission management, the most important thing is to think about the problem, with the right idea into the code is very easy.

According to the management mode of permission – role – user, the maintenance, adding, deleting, modifying and checking of permissions in the later period can be handled in the front end, and the operation can be stopped as long as the back end is configured once. Avoid the backend code in the permission management logic clutter, bad maintenance and other problems. In simple terms, each permission has a unique ID. After a user logs in, the user can determine whether the role corresponding to the user has the id of a certain permission, which serves as the criterion for determining whether the user has a certain permission. If a new page has N function permissions, add the routing address and function permissions to the routing permission table, add n function permissions to the function permission table, and assign corresponding permissions to roles.

This kind of public authority management, according to the different needs of each project has its own way of handling. In addition, rights management can also be made into a common component, and the configuration can be introduced when creating a project, which will not be discussed here.

Write in the back

This is the fourth article in Big Ice’s “Read it and Understand it” series, which aims to present some common concepts or methods in an easy to understand way. Welcome to click on other articles to discuss and learn:

  • Promise me, we’ll start using Symbol when we’re done.
  • “Read to understand the series” talk about the principle and implementation of data buried point
  • Does Ajax single-handedly create the entire front-end ecosystem?
  • “You know it when You’re Done” Oh, my God! Throttling and shaking are so simple to understand
  • 15 ways to play with strings
  • Substr (), slice(), substring(

Originality is not easy, if there are mistakes, welcome to point out.

If it helps you, please give the ice cube a triple (like the collection comments), let’s progress on the road to the front together ~🤭