Permissions are also handled a little differently from our traditional approach when the current backend is detached. The author happened to be in charge of the permission management module of a project a few days ago. Now the permission management module has been finished. I would like to introduce the problems encountered in the project and my solutions through 5-6 articles. This series of articles is not a hand-to-hand tutorial, mainly introduces the core ideas and explains the core code, the complete code friends can be on GitHub star and clone down to study. In addition, the original plan the project went up on the Internet for friends to see, but before buy the server in order to save money, only 512 MB of memory, two application run up open source project (already has a V tribe in running), so friends will only take a look at the following screenshots, have deployed at the end of the tutorial, the deployment to the local can also see the full effect.

In this article, we do not talk about the specific implementation, I will first introduce my permission management module of an overall architecture, and the final effect.

Database design

The permission database mainly contains five tables, namely resource table, role table, user table, resource role table and user role table. The database relationship model is as follows:

I would like to say the following about this table:

1. The HR table is a user table, storing the basic information of users.

2. Role is the role table. The name field indicates the English name of the role. According to the specification of SpringSecurity, it will start with ROLE_ and the nameZh field indicates the Chinese name of the role.

3. Menu table is a resource table, which involves a little too many fields. Since MY front end uses Vue to do this, when the user logs in successfully, the system will dynamically load the required modules according to the user’s role, and the information of all modules will be saved in menu table. The path, Component, iconCls, keepAlive, requireAuth and other fields in the menu table are required by vue-Router. That is to say, the data in menu will be returned to the front-end in the form of JSON, and then Vue will dynamically update the Router. There is also a url field in menu, indicating a URL pattern, that is, a path matching rule. Assuming that there is a path matching rule of /admin/**, when a user initiates a /admin/user request on the client, it will be intercepted by /admin/**. The system checks the role of the rule and whether the user has the corresponding role to determine whether the request is valid.

The following are some of the data in the user table, role table, and resource table respectively (the database script can be downloaded at the end of the article in the project location resources/vhr.sql) :





The overall effect

First of all, different users will see different system menus according to their roles after successful login. The complete menu is as follows:

After different users log in, they may see different things as follows:

The role of each user is assigned by the system administrator. The system administrator assigns roles to users as follows:

The system administrator can also manage the resources that different roles can operate. The following page is displayed:

Other delete, search and other trivial functions I will not introduce one by one here.

The project address

Due to the commercial agreement, the original project can not be Shared with you friend, so I made an open source project, the function of the project as a whole is more, but considering the article of this series is mainly to introduce the rights management module, so other modules are my castration off temporarily, but friends can rest assured, Authority management module code line is not deleted, involving authority management code and data are complete, can run directly. A user logs in to the background system as an administrator. After the login is successful, choose System Management > Basic Information Settings > Permission Group to configure the resources that can be operated by different roles. Then click system Management -> Operator Management, you can manage the role of each operator.

Project address: github.com/lenve/vhr

Rapid deployment

1. Clone the project to [email protected]:lenve/vhr.git

2. The database scripts are stored in the resources directory of the HRServer project and executed in MySQL

3. The database is configured in the application. Properties file under the Resources directory of the HRServer project

4. Run the HRServer project in IntelliJ IDEA

OK, so far, the server is started successfully, at this time we directly enter http://localhost:8082/index.html in the address bar to access our project, if you want to do secondary development, please continue to look at fifth, six steps.

5. Go to the vuehr directory and run the following commands in sequence:

Install NPM run dev at localhost:8080Copy the code

Since I have configured port forwarding in the Vuehr project to forward data to SpringBoot, after the project is started, we can access our front-end project by typing http://localhost:8080 in the browser. All requests pass data to SpringBoot through port forwarding (be careful not to close the SpringBoot project at this time).

6. Finally, you can use WebStorm and other tools to open vuehr project and continue development. After development, when the project is about to go online, you can still enter vuehr directory and execute the following command:

npm run buildCopy the code

After this command is successfully executed, a dist folder is created in the vuehr directory, and the two files static and index.html in this folder are copied to the resources/static/ directory in the SpringBoot project, and you can access them directly as in step 4.

In Step 5, you are required to have some experience in using NodeJS and NPM. If you are not familiar with NodeJS, you can search for it by yourselfVue official tutorial.

Matters needing attention

Again, this is only a permission management function module, only the permission management function is complete after running. After the local deployment is successful, you can modify the roles of each user and the resources that each role can operate. After the modification is successful, you can log out and log in as the modified user to view the menu changes.

Well, this article we say so much first, from the next article, I will share the core idea of this effect with partners, welcome partners to continue to pay attention to.

Pay attention to the public account, you can timely receive the latest articles: