Website login registration implementation logic

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

The purpose of this article is to sort out the knowledge points in the previous learning projects and to understand them to a certain extent.

List of technologies:

  1. SpringBoot
  2. MySQL
  3. redis
  4. JWT

User login logic:

First, open the front-end login page, and F12 carries out web URL capture:

Enter any information you want to see the address of the request backend:

Address:

State of the request URL: http://localhost:8888/login request method: POST code: 200 remote address: [: : 1) : 8888 reference site strategy: strict - origin - the when - cross - originCopy the code

Obviously, the front-end user enters the account, which is passed to the back-end receiver via a POST request:

 @RequestMapping("/login")
 public class LoginController {
     @Autowired
     private LoginService loginService;
     @PostMapping
     public Result login(@RequestBody LoginParam loginParam){
         returnloginService.login(loginParam); }}Copy the code

In order to facilitate transmission, front-end parameters are encapsulated as objects.

The logical operations for querying accounts are as follows:

  1. Obtaining the account password
  2. Check whether the account password is empty
  3. Password encryption, using MD5 encryption and salt operations
  4. Query the database by processing the account password (encrypted)
 String pwd = DigestUtils.md5Hex(password + salt);
 // Search the database according to the account and the encrypted password
 SysUser sysUser = sysUserService.findUser(account, pwd);
Copy the code
  1. If the search is successful, the token is generated using JWT toolkit and saved in Redis

  1. The forward end returns the generated token, checks the token, and logs in
 {
     "code": 200."success": true."msg": "success"."data": "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzQ4OTY1MDIsInVzZXJJZCI6MSwiaWF0IjoxNjM0MDA3NDcwfQ.9elJSiGa-QARLqKGLTeFW9go7ujsArd0QV_ HihHfEm0"
 }
Copy the code

This is where JWT and Redis implement simple login authentication.

User registration logic:

Front-end request:

Front transfer account name, password and nickname, called http://localhost:8888/register address post transfer, after receiving and parameters

  1. Get front-end parameters and check whether the parameters are valid (null)

  2. Check whether the account exists, yes, return the account has been registered JSON data

  3. If the account does not exist and generates the User object, the interface is invoked to save the password. The password needs to be encrypted with MD5+ salt

  4. Generate a token token

     String token = JWTUtils.createToken(sysUser.getId());
Copy the code

  5. Save to Redis and return

    The reason for saving redis here is that after successful registration, it will jump to the front end page, and the front end page will look for the user’s information in Redis for comparison. If the information exists, the login will be displayed; otherwise, the login fails.

  6. Note that with transactions, registered users need to be rolled back (to prevent dirty data) if any of the intermediate processes fail.

Pass the generated token to the front end:

 {
     "code": 200."success": true."msg": "success"."data": "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzQ4NDc0MzQsInVzZXJJZCI6MTQ0NzU1MjU3MDYzMDQzNDgxNywiaWF0IjoxNjMzOTU4NDAxfQ.zn5meG_lUWR Ouz7TmkUGS0MTjO1-TDQa42uM_-uhXqs"
 }
Copy the code

The front end calls the interface,

 http://localhost:8888/users/currentUser
Copy the code

The front-end will obtain the token to the back-end interface currentUser, find the user information in Redis, verify the information, parse the data, return the basic information of the user, front-end parsing

Front-end index.js

 login({commit}, user) {
       return new Promise((resolve, reject) = > {
         login(user.account, user.password).then(data= > {
           if(data.success){
             commit('SET_TOKEN', data.data)
             setToken(data.data)
             resolve()
           }else{
             reject(data.msg)
           }
         }).catch(error= > {
           reject(error)
         })
       })
Copy the code

Here is a simple login registration function, the above content is part of the code section, if there is a need to learn can comment messages.

References:

【 Path of code God 】 blog development;

The end:

If you see this or happen to help you, please click 👍 or ⭐ thank you;

There are mistakes, welcome to point out in the comments, the author will see the modification.