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

好家伙,

 

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

 

作者:养肥胖虎原文地址:https://www.cnblogs.com/FatTiger4399/p/16945932.html

%s 个评论

要回复文章请先登录注册