SpringBoot + Vue is separated from the frontend and backend, and SpringSecurity is used to solve the permission problem perfectly,

SpringBoot + Vue is separated from the frontend and backend, and SpringSecurity is used to solve the permission problem perfectly,

Currently, when the backend is separated, the handling of permission issues is slightly different from our traditional processing methods. I am responsible for the permission management module of a project just a few days ago. Now the permission management module has been completed. I want to read 5-6 articles, to introduce the problems encountered in the project and my solutions. I hope this series can help my friends. This series of articles is not a hands-on tutorial. It mainly introduces the core idea and explains the core code. complete code partners can clone and study star on GitHub. In addition, the project was originally planned to run on the Internet for viewing by friends. However, in order to save money by buying servers, the memory was only 512 MB, the two applications cannot run (there is already a V tribe open-source project running), so friends can only look at the following content, and there are deployment tutorials at the end of this article, you can also view the complete effect after deploying it locally.

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

Database Design

A permission database consists of five tables: resource table, role table, user table, resource role table, and user role table. The database relationship model is as follows:

 

For this table, I will talk about the following points:

1. The hr table is a user table that stores basic user information.

2. role is the ROLE table. The name field indicates the English name of the role. According to SpringSecurity specifications, the ROLE _ starts and the nameZh field indicates the Chinese name of the role.

3. the menu table is a resource table that involves a lot of fields. Because I use Vue at the front end, after the user successfully logs on, the system dynamically loads the required modules based on the user's role. Information about all modules is stored in the menu table, the path, component, iconCls, keepAlive, and requireAuth fields in the menu table are all required fields in Vue-Router. That is to say, the data in the menu will be returned to the front-end in json format, then, the vue dynamically updates the router. The menu also contains a field url, indicating a url pattern, that is, the Path Matching Rule. Assume that there is a path matching rule/Admin /**When the user initiates/Admin/userWill be/Admin /**The system then checks the role corresponding to the rule, and then checks whether the user has the role to determine whether the request is legal.

These are part of the data in the User table, role table, and resource table (the database script can be downloaded from the Project address at the end of the text, and the location is resources/vhr. SQL ):

Overall Effect

First, different users can view different system menus based on different roles after logon. The complete menu is as follows:

 

After logon, different users may see the following differences:

 

The role of each user is assigned by the system administrator. The system administrator assigns a role to the user on the following page:

 

The system administrator can also manage resources that different roles can operate on. The page is as follows:

 

I will not introduce other trivial functions such as deletion and search here.

Project address

Due to the commercial agreement, the original project cannot be shared with other partners. Therefore, I have dedicated an open-source project, which has many functions as a whole, however, considering that this series of articles mainly introduce the permission management module to everyone, I have temporarily castrated other modules, but you can rest assured that, the code of the permission management module is not deleted. The code and data involved in permission management are complete and can be directly run. The partner will log on to the background system as an administrator. After Successful Logon, clickSystem Management-> basic information settings-> permission GroupTo configure resources that can be operated by different roles. Then, clickSystem Management-> operator ManagementTo manage the roles of each operator.

Project address: https://github.com/lenve/vhr

Quick deployment

1. clone project to local git@github.com: lenve/vhr. git

2. Store the database script in the resources directory of the hrserver project and execute the database script in MySQL.

3. Configure the database in the application. properties file under the resources Directory of the hrserver project.

4. Run the hrserver project in IntelliJ IDEA

OK. Now, the server is successfully started. In this case, you can directly enter http: // localhost: 8082/index.html in the address bar to access our project. If you want to perform secondary development, continue to Step 5 and Step 6.

5. Go to the vuehr directory and enter the following commands in the command line:

# Installation dependency npm install # start the project npm run dev in localhost: 8080

Because I have configured port forwarding IN THE vuehr project to forward data to SpringBoot, after the project is started, enter http: // localhost: 8080 to access our front-end project. All requests are forwarded to SpringBoot through port forwarding (do not close the SpringBoot project at this time ).

6. You can use tools such as WebStorm to open the vuehr project and continue the development. After the development is complete, the vuehr directory is still displayed when the project is going to be launched, and then run the following command:

npm run build

After the command is executed successfully, a distfolder is generated under the vuehrdirectory. Copy the two statics and index.html files in the folder to the resources/static/directory of the SpringBoot project, and then you can directly access the file in step 1.

In step 5, you need to have some experience in using NodeJS, NPM, etc. If you are not familiar with it, you can search and learn it by yourself. We recommend the official Vue tutorial.

Notes

Once again, this is only a permission management function module. After running, only the permission management function is complete. After the local deployment is successful, you can modify the role of each user and the resources that each role can operate on. After the modification is successful, you can log out and Log On As the modified User, you can see the menu changes.

Summary

The above section describes the SpringBoot + Vue frontend and backend separation and uses SpringSecurity to perfectly solve the permission problem. I hope it will be helpful to you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!