悠扬随风 发表于 2022-12-3 20:35:12

我的第一个项目(六):(前后端)密码校验

好家伙,
 
xdm,密码验证忘写了,哈哈
bug展示:
1.登陆没有密码验证

主要体现为,乱输也能登进去
https://img2023.cnblogs.com/blog/2501855/202212/2501855-20221202195254063-1727963588.gif
 (小问题)
要是这么上线估计直接寄了
 
 
分析一波密码校验怎么做:
 
前端输完用户名密码之后,将数据发送到后端处理
后端要做以下几件事
①先确认这个用户名已注册
②我们拿着这个用户名去数据库中找对应的数据,拿到密码
③将前端发过来的密码与后端找到的密码进行比较
对了返回true,不对就false,
返回给前端
完成密码校验
 
 
1.来看看登陆这一部分涉及的代码:

SysUserController.java
<strong>@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;
    }</strong>SysUserServicelmpl.java中重写login方法:
<strong>@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,意思是没被注册过
            returnnull;
      }else {
            //查到了,将这条数据返回
            return userEntityList.get(0);
      }
    }</strong> 
 
 
2.先确认这个用户名已注册

<strong>   //wrapper.lambda().eq()单表查询,在"SysUserEntity::getLoginName"找一个指定的"loginName"
      wrapper.lambda().eq(SysUserEntity::getLoginName,loginName);</strong>lambda表达式看不懂可以点开看一下:
Java Lambda 表达式 | 菜鸟教程 (runoob.com)
 
 
 
3.我们拿着这个用户名去数据库中找对应的数据,拿到密码

<strong>     //BaseMapper的selectList()方法,根据id批量查询
      List<SysUserEntity> userEntityList = sysUserMapper.selectList(wrapper);
      //CollectionUtils.isEmpty()判断集合是否为空
      if(CollectionUtils.isEmpty(userEntityList)){
            //若判断为空,则返回null,意思是没被注册过
            returnnull;
      }else {
            //查到了,将这条数据返回
            return userEntityList.get(0);
      }</strong> 
 
 
4.将前端发过来的密码与后端找到的密码进行比较

<strong>String s1 = userDb.getPassword();
            String s2 = req.getPassword();
            //进行字符串校验
            if(s1.equals(s2)){
                //密码验证成功
                SysUserLoginResp userLoginResp = CopyUtil.copy(userDb, SysUserLoginResp.class);
                return userLoginResp;
            }else {
                //密码校验失败
                return null;
            }</strong> 
不要写成以下形式,
<strong>       String a = userDb.getPassword();
            String b = req.getPassword();
            if(a==b){
                SysUserLoginResp userLoginResp = CopyUtil.copy(userDb, SysUserLoginResp.class);
                return userLoginResp;
       }else {
                //密码校验失败
                return null;
            }</strong>a,b字符串并不指向同一对象,
所以,即使字符串完全相同,a==b也是false
 
 
5.前端的校验部分:

作用:防止输入空值无限注册
<strong>//表单验证
      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)

          }
      })
      }</strong>(好烂的写法)
 
 
 
6.效果展示:

https://img2023.cnblogs.com/blog/2501855/202212/2501855-20221203202123688-1712991749.gif
 
 
 
7.源码分享:

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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 我的第一个项目(六):(前后端)密码校验