百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 博客教程 > 正文

springboot+Vue项目中修改密码的实现

connygpt 2024-09-12 13:52 6 浏览

项目以springboot,springsecurity等技术为后端,vue+elementUI为前端。

需求,增加密码的修改。

打开修改密码dialog对话框,原密码中要输入并验证是否正确,新密码和确认新密码是验证是否一致和正则匹配,然后修改按钮提交到后端进行数据库中user表的密码更新。

一、后端部分

1、原密码的校验:

a.控制器

@PostMapping("/selectByUserNameAndPassword")
@ResponseBody
public Result<Boolean> selectByUserNameAndPassword(@RequestBody Map<String,String> map){
    if (map.get("username") == null || map.get("password") == null) {
        return Result.failure(501,"非法参数usernameORpassword");
    } else {
        return userService.selectByUserNameAndPassword(map.get("username"),map.get("password"));
    }
}

b.业务逻辑

由于密码加密后,每次重新加密得出的字符串是不一样的,因此不能单纯地靠字符串去做对比,使用BCryptPasswordEncoder对象提供的的matches方法。

@Override
public Result<Boolean> selectByUserNameAndPassword(String username, String password) {
    //密码对比判断使用matches方法判断
    BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
    //查出用户
    User user = userDao.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername, username));
    if (user == null) {
        return Result.defaultSuccess(false);
    }
    //重点方法:密码比较
    boolean matches = encoder.matches(password, user.getPassword());
    return Result.defaultSuccess(matches);
}

2、密码的更新

a.控制器

@PostMapping("/updataPassword")
@ResponseBody
public Result<Boolean> updataPassword(@RequestBody Map<String,String> map){
    if (map.get("username") == null || map.get("passwordOld") == null || map.get("passwordNew") == null) {
       return Result.failure(501,"非法参数");
    } else {
       return userService.updataPassword(map.get("username"),map.get("passwordOld"),map.get("passwordNew"));
    }
}

b.业务逻辑

@Override
public Result<Boolean> updataPassword(String username, String passwordOld, String passwordNew) {
    //需要再次验证旧密码
    BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
    //查出用户
    User user = userDao.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername, username));
    if (user == null) {
        return Result.defaultSuccess(false);
    } else {
        //密码比较
        boolean matches = encoder.matches(passwordOld, user.getPassword());
        //旧密码通过校验后才会进行更新密码操作
        if (matches){
            user.setPassword(new BCryptPasswordEncoder().encode(passwordNew));
            userDao.updateById(user);
            return Result.defaultSuccess(true);
        } else {
            return Result.defaultSuccess(false);
        }
    } 
}

二、前端部分

1、dialog对话框

<!--密码修改框-->
    <el-dialog title="修改密码" :visible="showPassword" :close-on-click-modal="false" width="20%" @close="updataPasswordCancle('password')">
      <!--rules绑定验证规则-->
      <el-form :model="password"  class="demo-ruleForm" status-icon :rules="rules" ref="password">
        <!--prop为要验证的字段-->
        <el-form-item label="原密码" :label-width="formLabelWidth" :required="true" prop="old">
          <el-input v-model.trim="password.old"  maxlength="20" show-word-limit placeholder="必填" show-password autofocus></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" :required="true" prop="new">
          <el-input v-model.trim="password.new"  maxlength="20" show-word-limit placeholder="必填" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" :label-width="formLabelWidth" :required="true" prop="newOk">
          <el-input v-model.trim="password.newOk"  maxlength="20" show-word-limit placeholder="必填" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updataPasswordCancle('password')">取 消</el-button>
        <el-button type="primary" @click="updataPasswordOk('password')" >修  改</el-button>
      </div>
    </el-dialog>

2、js代码逻辑

<script>
// import store from '../store/index.js'
import Vue from 'vue'
import store from './store/index.js'
export default {
  data () {
    // 验证原密码是否正确
    let checkOld = (rule, value, callback) => {
      var _this = this
      if (!value) {
        return callback(new Error('旧密码不能为空'))
      } else {
        this.$axios.post('user/selectByUserNameAndPassword', {'username': _this.username, 'password': _this.password.old}).then(function (res) {
          if (res.data.data === false) {
            return callback(new Error('密码错误'))
          } else {
            callback()
          }
        })
      }
    }
    // 新密码以字母开头,8-12位长度
    let checkNew = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('新密码不能为空'))
      } else {
        // 8-12位,以字母开头
        let match = /^[a-zA-Z]\w{7,11}$/
        if (!match.test(value)) {
          return callback(new Error('新密码以字母开头,8-12位长度'))
        } else {
          callback()
        }
      }
    }
    // 验证确认密码
    let checkNewOk = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('新密码不能为空'))
      } else {
        if (value !== this.password.new) {
          return callback(new Error('新密码必须一致'))
        } else {
          // 8-12位,以字母开头
          let match = /^[a-zA-Z]\w{7,11}$/
          if (!match.test(value)) {
            return callback(new Error('新密码以字母开头,8-12位长度'))
          } else {
            callback()
          }
        }
      }
    }
    return {
      formLabelWidth: '100px',
      username: '',
      showPassword: false,
      password: {},
      rules: {
        old: [
          {required: true, validator: checkOld, trigger: 'blur'}
        ],
        new: [
          {required: true, validator: checkNew, trigger: 'blur'}
        ],
        newOk: [
          {required: true, validator: checkNewOk, trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    var token = JSON.parse(this.$store.state.token)
    // 获取用户名
    this.username = token.username
  },
  methods: {
    // 开启修改密码dialog
    updataPassword () {
      this.password = {}
      this.showPassword = true
    },
    // 取消,隐藏,清空password,清除验证
    updataPasswordCancle (formName) {
      this.showPassword = false
      this.password = {}
      this.$refs[formName].resetFields()
    },
    updataPasswordOk (formName) {
      var _this = this
      this.$refs[formName].validate((valid) => {
        // 验证通过
        if (valid) {
          this.$axios.post('user/updataPassword', {'username': _this.username, 'passwordOld': _this.password.old, 'passwordNew': _this.password.new}).then(function (res) {
            if (res.data.data === true) {
              _this.$message({
                type: 'success',
                message: '修改密码成功!'
              })
              _this.showPassword = false
              _this.password = {}
            }
          })
        } else {
          // 没有通过验证
          return false
        }
      })
    }
  }
}
</script>

三、security中取消普通用户对用户密码修改的拦截

http.authorizeRequests()  //所有请求拦截
                // 密码验证及修改密码只需用户认证
                .antMatchers("/user/selectByUserNameAndPassword", "/user/updataPassword").authenticated()

相关推荐

自学Python,写一个挨打的游戏代码来初识While循环

自学Python的第11天。旋转~跳跃~,我~闭着眼!学完循环,沐浴着while的光芒,闲来无事和同事一起扯皮,我说:“编程语言好神奇,一个小小的循环,竟然在生活中也可以找到原理和例子”,同事也...

常用的 Python 工具与资源,你知道几个?

最近几年你会发现,越来越多的人开始学习Python,工欲善其事必先利其器,今天纬软小编就跟大家分享一些常用的Python工具与资源,记得收藏哦!不然下次就找不到我了。1、PycharmPychar...

一张思维导图概括Python的基本语法, 一周的学习成果都在里面了

一周总结不知不觉已经自学Python一周的时间了,这一周,从认识Python到安装Python,再到基本语法和基本数据类型,对于小白的我来说无比艰辛的,充满坎坷。最主要的是每天学习时间有限。只...

三日速成python?打工人,小心钱包,别当韭菜

随着人工智能的热度越来越高,许多非计算机专业的同学们也都纷纷投入到学习编程的道路上来。而Python,作为一种相对比较容易上手的语言,也越来越受欢迎。网络上各类网课层出不穷,各式广告令人眼花缭乱。某些...

Python自动化软件测试怎么学?路线和方法都在这里了

Python自动化测试是指使用Python编程语言和相关工具,对软件系统进行自动化测试的过程。学习Python自动化测试需要掌握以下技术:Python编程语言:学习Python自动化测试需要先掌握Py...

Python从放弃到入门:公众号历史文章爬取为例谈快速学习技能

这篇文章不谈江流所专研的营销与运营,而聊一聊技能学习之路,聊一聊Python这门最简单的编程语言该如何学习,我完成的第一个Python项目,将任意公众号的所有历史文章导出成PDF电子书。或许我这个Py...

【黑客必会】python学习计划

阅读Python文档从Python官方网站上下载并阅读Python最新版本的文档(中文版),这是学习Python的最好方式。对于每个新概念和想法,请尝试运行一些代码片段,并检查生成的输出。这将帮助您更...

公布了!2025CDA考试安排

CDA数据分析师报考流程数据分析师是指在不同行业中专门从事行业数据搜集、整理、分析依据数据作出行业研究评估的专业人员CDA证书分为1-3级,中英文双证就业面广,含金量高!!?报考条件:满18...

一文搞懂全排列、组合、子集问题(经典回溯递归)

原创公众号:【bigsai】头条号:程序员bigsai前言Hello,大家好,我是bigsai,longtimenosee!在刷题和面试过程中,我们经常遇到一些排列组合类的问题,而全排列、组合...

「西法带你学算法」一次搞定前缀和

我花了几天时间,从力扣中精选了五道相同思想的题目,来帮助大家解套,如果觉得文章对你有用,记得点赞分享,让我看到你的认可,有动力继续做下去。467.环绕字符串中唯一的子字符串[1](中等)795.区...

平均数的5种方法,你用过几种方法?

平均数,看似很简单的东西,其实里面包含着很多学问。今天,分享5种经常会用到的平均数方法。1.算术平均法用到最多的莫过于算术平均法,考试平均分、平均工资等等,都是用到这个。=AVERAGE(B2:B11...

【干货收藏】如何最简单、通俗地理解决策树分类算法?

决策树(Decisiontree)是基于已知各种情况(特征取值)的基础上,通过构建树型决策结构来进行分析的一种方式,是常用的有监督的分类算法。决策树算法是机器学习中的一种经典算法,它通过一系列的规则...

面试必备:回溯算法详解

我们刷leetcode的时候,经常会遇到回溯算法类型题目。回溯算法是五大基本算法之一,一般大厂也喜欢问。今天跟大家一起来学习回溯算法的套路,文章如果有不正确的地方,欢迎大家指出哈,感谢感谢~什么是回溯...

「机器学习」决策树——ID3、C4.5、CART(非常详细)

决策树是一个非常常见并且优秀的机器学习算法,它易于理解、可解释性强,其可作为分类算法,也可用于回归模型。本文将分三篇介绍决策树,第一篇介绍基本树(包括ID3、C4.5、CART),第二篇介绍Ran...

大话AI算法: 决策树

所谓的决策树算法,通俗的说就是建立一个树形的结构,通过这个结构去一层一层的筛选判断问题是否好坏的算法。比如判断一个西瓜是否好瓜,有20条西瓜的样本提供给你,让你根据这20条(通过机器学习)建立起...