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

Because the whole project has many functions and is complicated, it is developed in several phases. At present, the permission management module has been developed, and other modules are still under development. Considering that the permission management module is relatively independent and does not conflict with the functions of other modules, and the permission management after the separation of the front and back ends is a pain point for many partners, this project is open source in advance for the research of partners. But be warned, you won’t be able to see all the features in this project because it’s not finished. There are two modules related to rights management, which are System Management -> Basic Information Settings -> Rights Group to manage the relationship between roles and resources, and System Management -> Operator Management to manage the relationship between users and roles. In addition, the project is constantly updated. You can check the latest features on GitHub through the update record.

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, at this point, the server is successfully started, at this point we directly enter in the address barhttp://localhost:8082/index.htmlTo visit our project, if you want to do secondary development, please continue to see steps 5 and 6.

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

# install dependencies
npm install

Start the project at localhost:8080
npm run dev
Copy 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 build
Copy 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.

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 [Jiangnan little Rain], focus on Spring Boot+ micro service and front and back end separation and other full stack technology, regular video tutorial sharing, after attention to reply to Java, get Songko for you carefully prepared Java dry goods!