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

需求，增加密码的修改。

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

一、后端部分

1、原密码的校验：

a.控制器

@PostMapping("/selectByUserNameAndPassword")@ResponseBodypublic Result selectByUserNameAndPassword(@RequestBody Map 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方法。

@Overridepublic Result selectByUserNameAndPassword(String username, String password) {    //密码对比判断使用matches方法判断    BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();    //查出用户    User user = userDao.selectOne(Wrappers.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")@ResponseBodypublic Result updataPassword(@RequestBody Map 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.业务逻辑

@Overridepublic Result updataPassword(String username, String passwordOld, String passwordNew) {    //需要再次验证旧密码    BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();    //查出用户    User user = userDao.selectOne(Wrappers.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对话框

2、js代码逻辑

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

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