好家伙,

xdm,密碼驗證忘寫了,哈哈

bug展示:

1.登陸沒有密碼驗證

主要體現為,亂輸也能登進去

 (小問題)

要是這麼上線估計直接寄了

分析一波密碼校驗怎麼做:

前端輸完用戶名密碼之後,將數據發送到後端處理

後端要做以下幾件事

①先確認這個用戶名已註冊

②我們拿著這個用戶名去資料庫中找對應的數據,拿到密碼

③將前端發過來的密碼與後端找到的密碼進行比較

對了返回true,不對就false,

返回給前端

完成密碼校驗

1.來看看登陸這一部分涉及的代碼:

SysUserController.java

@PostMapping("login")
    public CommonResp login(@RequestBody SysUserLoginReq req){
//        zxcv1234
        req.setPassword(DigestUtils.md5DigestAsHex(req.getPassword().getBytes()));
        CommonResp resp = new CommonResp<>();
        SysUserLoginResp loginResp = sysUserService.login(req);
        if (loginResp == null) {
            resp.setSuccess(false);
        }
        resp.setContent(loginResp);
        return resp;
    }

SysUserServicelmpl.java中重寫login方法:

@Override
    public SysUserLoginResp login(SysUserLoginReq req) {
        SysUserEntity userDb = selectByLoginName(req.getLoginName());
        QueryWrapper<SysUserEntity> wrapper = new QueryWrapper<>();
        if(ObjectUtils.isEmpty(userDb)){
            //用戶不存在
            return null;
        }else {
            String s1 = userDb.getPassword();
            String s2 = req.getPassword();
            //進行字元串校驗
            if(s1.equals(s2)){
                //密碼驗證成功
                SysUserLoginResp userLoginResp = CopyUtil.copy(userDb, SysUserLoginResp.class);
                return userLoginResp;
            }else {
                //密碼校驗失敗
                return null;
            }
        }
    }

    //查詢loginName是否被註冊
    public SysUserEntity selectByLoginName(String loginName){
        //QueryWrapper<>()
        QueryWrapper<SysUserEntity> wrapper = new QueryWrapper<>();
        //wrapper.lambda().eq()單表查詢,在"SysUserEntity::getLoginName"找一個指定的"loginName"
        wrapper.lambda().eq(SysUserEntity::getLoginName,loginName);
        //BaseMapper的selectList()方法,根據id批量查詢
        List<SysUserEntity> userEntityList = sysUserMapper.selectList(wrapper);
        //CollectionUtils.isEmpty()判斷集合是否為空
        if(CollectionUtils.isEmpty(userEntityList)){
            //若判斷為空，則返回null,意思是沒被註冊過
            return  null;
        }else {
            //查到了,將這條數據返回
            return userEntityList.get(0);
        }
    }

2.先確認這個用戶名已註冊

　　 //wrapper.lambda().eq()單表查詢,在"SysUserEntity::getLoginName"找一個指定的"loginName"
        wrapper.lambda().eq(SysUserEntity::getLoginName,loginName);

lambda表達式看不懂可以點開看一下:

Java Lambda 表達式 | 菜鳥教程 (runoob.com)

3.我們拿著這個用戶名去資料庫中找對應的數據,拿到密碼

　　　　　//BaseMapper的selectList()方法,根據id批量查詢
        List<SysUserEntity> userEntityList = sysUserMapper.selectList(wrapper);
        //CollectionUtils.isEmpty()判斷集合是否為空
        if(CollectionUtils.isEmpty(userEntityList)){
            //若判斷為空，則返回null,意思是沒被註冊過
            return  null;
        }else {
            //查到了,將這條數據返回
            return userEntityList.get(0);
        }

4.將前端發過來的密碼與後端找到的密碼進行比較

String s1 = userDb.getPassword();
            String s2 = req.getPassword();
            //進行字元串校驗
            if(s1.equals(s2)){
                //密碼驗證成功
                SysUserLoginResp userLoginResp = CopyUtil.copy(userDb, SysUserLoginResp.class);
                return userLoginResp;
            }else {
                //密碼校驗失敗
                return null;
            }

不要寫成以下形式,

　　　　　　　String a = userDb.getPassword();
            String b = req.getPassword();
            if(a==b){
                SysUserLoginResp userLoginResp = CopyUtil.copy(userDb, SysUserLoginResp.class);
                return userLoginResp;
　　　　　　　}else {
                //密碼校驗失敗
                return null;
            }

a,b字元串並不指向同一對象,

所以,即使字元串完全相同,a==b也是false

5.前端的校驗部分:

作用:防止輸入空值無限註冊

//表單驗證
      if (this.loginForm.loginName == "") {
        this.$message({
          message: '請輸入用戶名',
          type: 'error'
        });
        return;
      }
      if (this.loginForm.password == "") {
        this.$message({
          message: '請輸入密碼',
          type: 'error'
        });
        return;
      }
      //發送登陸請求
      if (this.loginForm.loginName != "" && this.loginForm.password != "") {
        this.axios.post('http://localhost:3312/sys-user/login', this.loginForm).then((resp) => {

          console.log(resp);
          let data = resp.data;
          //
          if (data.success) {
            this.loginForm = {};
            this.$message({
              message: '登陸成功!!!',
              type: 'success'
            });
            this.$router.push({ path: '/Home' })
          } else {
            this.$message({
              message: '登陸失敗,密碼錯誤或用戶名未註冊',
              type: 'error'
            });
            console.log(data)

          }
        })
      }

(好爛的寫法)

6.效果展示:

7.源碼分享:

https://gitee.com/tang-and-han-dynasties/login-entity.git