Shulou(Shulou.com)06/02 Report--

This article shows you the introduction of the separation of front and rear ends in SpringBootSecurity and the operation method of simple login, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Front and rear end separation

Many common functions of security under springboot have been discussed earlier. For other functions, please refer to the official documentation to learn. The form of web login is no longer the most popular, the most popular is the separation of front and rear login, the front end becomes a separate project, and the interaction with the background, including login authentication and authorization, is realized by asynchronous interface. In the application mode where the front end is not separated from the front end, the effect of the front end page is controlled by the back end, and the back end renders the page or redirects it, that is, the back end needs to control the display of the front end, and the coupling between the front end and the back end is very high. This application mode is more suitable for pure web applications.

However, when the backend docks with App, App may not need the backend to return a HTML web page, but only the data itself, so the interface that the backend originally returned to the web page is no longer suitable for front-end App applications, and another set of interfaces need to be developed in order to interface with App backend.

In the application mode where the front end is separated from the front end, the back end only returns the data needed by the front end, no longer renders the HTML page, and no longer controls the effect of the front end. As for what the front-end users see and how the data requested from the back-end is loaded into the front-end, it is up to the front-end to decide. The web page has the processing method of the web page and App has the processing method of App, but no matter which front-end, the data required is basically the same. The back-end only needs to develop a set of logic to provide data to the outside world. In the application mode of front-end separation, the coupling degree between front-end and back-end is relatively low.

In the application mode in which the front and rear ends are separated, we usually call each view developed at the back end an interface, or API, and the front end adds, deletes, modifies and queries the data through the access interface.

Cross-domain problems in the separation of front and rear ends

After the separation of the front and rear ends, the classic problem is the cross-domain problem. Cross-domain, which means that browsers cannot execute scripts from other sites. It is caused by the same origin (domain name, protocol, port) policy of the browser, and it is the security restriction imposed by the browser on JavaScript. Specific cross-domain theory cross-domain self-query learning. In security, solving cross-domain problems is very simple. You only need to add a few lines of configuration.

Simple exampl

Let's write a simple example to implement the front and back end separate asynchronous login. First, introduce dependencies:

Modify the springboot default profile to add the default user:

The startup class does not need to be modified, but add an interface:

To configure the security configuration class, first configure login. You no longer need to configure login page address for asynchronous login. You only need to configure login parameters and api address:

Then add authorization configuration and login success processing:

Finally, add the csrf configuration:

Now that the simplest configuration is complete, let's take a look at the successful login process:

A login success message in the form of json is returned.

Simple test

To do a simple test, start the project and use postman to directly access the hello interface:

The visit is not successful, returned to the login html page, about the processing without permissions, later will be more friendly. Log in using the API below:

You can see that the normal login is successful, and a cookie message is added to the postman:

This is the same as the cookie of the browser, which is deleted and becomes unlogged in. Now when you access the hello interface, you can see the normal effect:

Add cross-domain

Adding a cross-domain configuration is very simple. First, call the cors method in the security configuration:

Then we open the official document of springboot to view the cross-domain configuration:

As you can see, in springboot, global cross-domain configuration is very simple, so let's imitate and write a bean:

In this way, cross-domain configuration is ready.

Other processors

Take a look at the processor when login fails (such as account error):

Configure the login failure processor:

Test:

Take a look at exception handlers that have timed out or are not logged in:

Configure login timeout or not logging in to the processor:

Test, without logging in, directly access the hello interface:

Now the hint is much more friendly. Finally, take a look at the insufficient permissions processor:

Insufficient configuration permissions for processors:

Then enable the permission annotation at the method level, and configure the HELLO permission on the hello method:

In the configuration file, configure a different role for the default user admin:

Then restart the project, first log in in postman, and then access the hello interface:

Insufficient permissions will be prompted based on the results of the processor.

Description

The above is a simple example of a separate login between the front and back ends. There are only a few simple functions applied here, but the functions discussed earlier, such as querying users from the database, dynamic permissions, sharing session, remembering me, etc., can also be added to the front and back end separate login functions, which are no different from the previous web login. Using these can fully satisfy the separate login and authorization functions of the front and back end.

Code address: https://gitee.com/blueses/spring-boot-security 12

The above is the introduction of the separation of front and rear in SpringBootSecurity and the operation method of simple login. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.