SpringBoot之網站的登陸註冊邏輯

xbhog發表於2021-10-12
Spring Boot網站

網站的登入註冊實現邏輯

該文章主要是為了整理之前學習專案中的知識點，並進行一定程度的理解。

技術列表：

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

使用者登入邏輯：

首先開啟前端登入頁面，F12進行網頁URL抓取：

image-20211012104858289

隨便輸入資訊，檢視請求後端的地址：

地址：

請求 URL: http://localhost:8888/login
請求方法: POST
狀態程式碼: 200 
遠端地址: [::1]:8888
引用站點策略: strict-origin-when-cross-origin

很明顯，前端使用者輸入賬戶，通過post請求傳遞給後端接收：

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

}

這裡為了方便傳輸,把前端引數封裝成物件傳入.

後端驗證查詢賬戶的邏輯操作：

  1. 獲取賬戶密碼
  2. 判斷賬戶密碼是否為空
  3. 密碼加密，採用MD5加密+鹽的操作
  4. 通過處理的賬戶密碼(加密)進行資料庫查詢
String pwd = DigestUtils.md5Hex(password + salt);
//根據賬號和加密的密碼進行資料庫的查詢
SysUser sysUser = sysUserService.findUser(account, pwd);
  1. 查詢成功，使用JWT工具包生成token，儲存到redis中

image-20211012105628301

  1. 向前端返回生成的token，檢查token,進行登入
{
    "code": 200,
    "success": true,
    "msg": "success",
    "data": "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzQ4OTY1MDIsInVzZXJJZCI6MSwiaWF0IjoxNjM0MDA3NDcwfQ.9elJSiGa-QARLqKGLTeFW9go7ujsArd0QV_HihHfEm0"
}

這裡就實現了JWT和redis實現簡單的登入驗證功能。

使用者註冊邏輯：

前端請求：

image-20211012112212421

前端傳遞賬戶名、密碼、暱稱，呼叫http://localhost:8888/register地址進行post傳參，後端接收引數

  1. 獲取前端引數，判斷引數是否合法(是否為空)

  2. 判斷賬戶是否存在，存在，返回賬戶已經被註冊了的json資料

  3. 不存在、註冊賬戶（生成User物件）呼叫儲存介面，儲存的時候需要將密碼進行MD5+鹽 加密

  4. 生成token令牌

    String token = JWTUtils.createToken(sysUser.getId());

  5. 存入redis 並返回

    這裡存入redis是因為，註冊成功後會跳轉到前端頁面，前端頁面會去redis中找user的資訊進行對比，如果存在，顯示登入，反之登入失敗。

  6. 注意加上事務，一旦中間的任何過程出現問題，註冊的使用者需要回滾(防止髒資料)

將生成得token傳遞給前端：

{
    "code": 200,
    "success": true,
    "msg": "success",
    "data": "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzQ4NDc0MzQsInVzZXJJZCI6MTQ0NzU1MjU3MDYzMDQzNDgxNywiaWF0IjoxNjMzOTU4NDAxfQ.zn5meG_lUWROuz7TmkUGS0MTjO1-TDQa42uM_-uhXqs"
}

前端呼叫該介面，：

http://localhost:8888/users/currentUser

前端將獲得token傳遞給後端介面currentUser，在redis中找到user資訊，校驗資訊，解析資料，返回使用者基本資訊，前端解析

前端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)
        })
      })

到這裡就是簡單的登入註冊的功能，上述內容都是部分程式碼段，如果有需要學習的可以評論留言。

參考文獻：

【碼神之路】部落格開發；

結束：

如果你看到這裡或者正好對你有所幫助，希望能點個?或者⭐感謝；

有錯誤的地方，歡迎在評論指出，作者看到會進行修改。

相關文章