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

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

主要体现为,乱输也能登进去

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

SysUserController.java

1. <strong>@PostMapping("login")
2.     public CommonResp login(@RequestBody SysUserLoginReq req){
3. //        zxcv1234
4.         req.setPassword(DigestUtils.md5DigestAsHex(req.getPassword().getBytes()));
5.         CommonResp resp = new CommonResp<>();
6.         SysUserLoginResp loginResp = sysUserService.login(req);
7.         if (loginResp == null) {
8.             resp.setSuccess(false);
9.         }
10.         resp.setContent(loginResp);
11.         return resp;
12.     }</strong>

复制代码

SysUserServicelmpl.java中重写login方法:

1. <strong>@Override
2.     public SysUserLoginResp login(SysUserLoginReq req) {
3.         SysUserEntity userDb = selectByLoginName(req.getLoginName());
4.         QueryWrapper<SysUserEntity> wrapper = new QueryWrapper<>();
5.         if(ObjectUtils.isEmpty(userDb)){
6.             //用户不存在
7.             return null;
8.         }else {
9.             String s1 = userDb.getPassword();
10.             String s2 = req.getPassword();
11.             //进行字符串校验
12.             if(s1.equals(s2)){
13.                 //密码验证成功
14.                 SysUserLoginResp userLoginResp = CopyUtil.copy(userDb, SysUserLoginResp.class);
15.                 return userLoginResp;
16.             }else {
17.                 //密码校验失败
18.                 return null;
19.             }
20.         }
21.     }
23.     //查询loginName是否被注册
24.     public SysUserEntity selectByLoginName(String loginName){
25.         //QueryWrapper<>()
26.         QueryWrapper<SysUserEntity> wrapper = new QueryWrapper<>();
27.         //wrapper.lambda().eq()单表查询,在"SysUserEntity::getLoginName"找一个指定的"loginName"
28.         wrapper.lambda().eq(SysUserEntity::getLoginName,loginName);
29.         //BaseMapper的selectList()方法,根据id批量查询
30.         List<SysUserEntity> userEntityList = sysUserMapper.selectList(wrapper);
31.         //CollectionUtils.isEmpty()判断集合是否为空
32.         if(CollectionUtils.isEmpty(userEntityList)){
33.             //若判断为空，则返回null,意思是没被注册过
34.             return  null;
35.         }else {
36.             //查到了,将这条数据返回
37.             return userEntityList.get(0);
38.         }
39.     }</strong>

复制代码

 
 
 
2.先确认这个用户名已注册

1. <strong>　　 //wrapper.lambda().eq()单表查询,在"SysUserEntity::getLoginName"找一个指定的"loginName"
2.         wrapper.lambda().eq(SysUserEntity::getLoginName,loginName);</strong>

复制代码

lambda表达式看不懂可以点开看一下:
Java Lambda 表达式 | 菜鸟教程 (runoob.com)
 
 
 
3.我们拿着这个用户名去数据库中找对应的数据,拿到密码

1. <strong>　　　　　//BaseMapper的selectList()方法,根据id批量查询
2.         List<SysUserEntity> userEntityList = sysUserMapper.selectList(wrapper);
3.         //CollectionUtils.isEmpty()判断集合是否为空
4.         if(CollectionUtils.isEmpty(userEntityList)){
5.             //若判断为空，则返回null,意思是没被注册过
6.             return  null;
7.         }else {
8.             //查到了,将这条数据返回
9.             return userEntityList.get(0);
10.         }</strong>

复制代码

 
 
 
4.将前端发过来的密码与后端找到的密码进行比较

1. <strong>String s1 = userDb.getPassword();
2.             String s2 = req.getPassword();
3.             //进行字符串校验
4.             if(s1.equals(s2)){
5.                 //密码验证成功
6.                 SysUserLoginResp userLoginResp = CopyUtil.copy(userDb, SysUserLoginResp.class);
7.                 return userLoginResp;
8.             }else {
9.                 //密码校验失败
10.                 return null;
11.             }</strong>

复制代码

 
不要写成以下形式,

1. <strong>　　　　　　　String a = userDb.getPassword();
2.             String b = req.getPassword();
3.             if(a==b){
4.                 SysUserLoginResp userLoginResp = CopyUtil.copy(userDb, SysUserLoginResp.class);
5.                 return userLoginResp;
6. 　　　　　　　}else {
7.                 //密码校验失败
8.                 return null;
9.             }</strong>

复制代码

a,b字符串并不指向同一对象,
所以,即使字符串完全相同,a==b也是false
 
 
5.前端的校验部分:

作用:防止输入空值无限注册

1. <strong>//表单验证
2.       if (this.loginForm.loginName == "") {
3.         this.$message({
4.           message: '请输入用户名',
5.           type: 'error'
6.         });
7.         return;
8.       }
9.       if (this.loginForm.password == "") {
10.         this.$message({
11.           message: '请输入密码',
12.           type: 'error'
13.         });
14.         return;
15.       }
16.       //发送登陆请求
17.       if (this.loginForm.loginName != "" && this.loginForm.password != "") {
18.         this.axios.post('http://localhost:3312/sys-user/login', this.loginForm).then((resp) => {
20.           console.log(resp);
21.           let data = resp.data;
22.           //
23.           if (data.success) {
24.             this.loginForm = {};
25.             this.$message({
26.               message: '登陆成功!!!',
27.               type: 'success'
28.             });
29.             this.$router.push({ path: '/Home' })
30.           } else {
31.             this.$message({
32.               message: '登陆失败,密码错误或用户名未注册',
33.               type: 'error'
34.             });
35.             console.log(data)
37.           }
38.         })
39.       }</strong>

复制代码

(好烂的写法)
 
 
 
6.效果展示:


 
 
 
7.源码分享:

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！