SpringBoot +VUE后台管理登录+MD5加密验证

悠悠 2023-10-03 19:53 36阅读 0赞

![6c01a03a8a8941d3a199fbd247e62fc6.png][]

今天带来一个比较简单 通俗易懂的登录验证

前端可以用form表单或elementUI的组件实现

我用到的是elementUI 用v-model双向绑定并且提交后台处理验证

代码奉上

1、登录页面的input框和提交按钮

<el-input class="inputVa" style="margin-top: 30px;" v-model="loginForm.loginName" placeholder="请输入账号"></el-input>
    <el-input class="inputVa" v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input><br>
    <el-button type="primary" class="submitVa" @click="login">Login</el-button>

2、vue项目data

data () {
        return {
          loginForm: {
            loginName: '',
            password: ''
          }
        }
      }

3、按钮提交方法

3.1、判断账号密码是否是默认值 '' 也就是判断用户是否输入了账号密码

3.2、通过返回值flag判断是否验证成功（是否允许登录）

3.3、如果验证成功后可以写一个编辑式路由实现跳转主页 this.$router.push('要跳转的路由地址')

login () { // 登录
          if (this.loginForm.loginName === '' || this.loginForm.password === '') {
            this.myMessage('error', '账号或密码不能为空')
          } else {
            this.$axios.post('你本地的方法地址例如（http://localhost:8083/UserController/login）', this.loginForm).then(res => {
              debugger
              if (res.data.flag) {
                this.myMessage('success', '登录成功')
              } else {
                this.myMessage('error', '账号或密码错误')
              }
            }).catch(err => {
              console.log(err)
            })
          }
        },
         },
        myMessage (type, message) { // 弹窗提示
          this.$message({
            message: message,
            type: type
          })
        },

4、Controller

/**
         * 判断登录并返回token值
         * @param userEntity
         * @return
         */
        @PostMapping("login")
        public CommonResult login(@RequestBody UserEntity userEntity){
            CommonResult commonResult = userService.login(userEntity);
            return commonResult;
        }

5、Entity实体

@Data
    public class UserEntity {
    
        @Id
        private Integer id;//主键
    
        private String loginName;//账户名称
    
        private String password;//账户密码
    
    }

6、ServiceImpl

/**
         * 登录并生成token
         * @param userEntity
         * @return
         */
        @Override
        public CommonResult login(UserEntity userEntity) {
            //前端传输密码加密
            String md5pwd = MD5Util.getMD5(userEntity.getPassword());
                //添加条件 通过loginName查询库中是否有此用户
                Example example = new Example(UserEntity.class);
                example.createCriteria().andEqualTo("loginName",userEntity.getLoginName());
                UserEntity getByName = userMapper.selectOneByExample(example);
                //如果查询到了此账号
                if (getByName!=null){
                    //查询到的和用户输入的作比较
                    if (MD5Util.getMD5(userEntity.getPassword()).equals(getByName.getPassword())){
                        //成功返回
                        return CommonResult.ok();
                    }else{
                        return CommonResult.fail(505,"密码错误");
                    }
                }else{
                    return CommonResult.fail(505,"账号不存在");
                }
        }

关于CommonResult 封装可以看一下上期发过

建议登录使用Post提交方式相对比较安全一米米

[6c01a03a8a8941d3a199fbd247e62fc6.png]: https://img-blog.csdnimg.cn/6c01a03a8a8941d3a199fbd247e62fc6.png