Vue使用Axios调用SpringBoot密码修改接口报newPassword参数缺失问题

解决方法 #

后端接口使用@RequestParam接收参数，要求参数以查询参数（param）形式传递，因此修改Vue端Axios请求配置，将参数从data字段改为params字段传递即可。

原因说明 #

• Spring Boot的@RequestParam注解只能解析URL路径后的查询参数，以及Content-Type为x-www-form-urlencoded格式的请求体参数
• Axios默认将data字段的参数以JSON格式放到请求体中，后端无法通过@RequestParam识别
• Axios的params字段会自动将参数拼接为URL查询字符串，符合后端接口的参数接收要求

我在开发密码修改页面时遇到报错：明明已经在Vue中通过Axios传递了旧密码、新密码等数据，但接口一直返回「Required String parameter 'newPassword' is not present」、缺少旧密码参数的错误。

我看到有回答建议将参数的required设为false，我对oldPassword做了尝试，结果如下：

但考虑到新旧密码是密码修改接口的必传参数，我还是保持了required=true的配置。使用Postman或Swagger调用该接口可以正常返回200状态码，密码修改成功。
我曾怀疑是patch请求方式的问题，换成put请求后错误依旧存在。

前端代码 #

页面模板 #

<div class="input-with-label">
    <input v-model="newpassword" id="newpassword" placeholder="请输入新密码" :type="passwordType"  />
    <label for="newpassword">新密码</label>
    <div class="error-text" v-if="error.newpassword">{{error.newpassword}}</div>
</div>

<form @submit.prevent="changepassword" @submit="checkForm">
    <div v-if="activeButton() && !isSubmit">
        <button class="btn-bottom">修改</button>
    </div>
    <div v-else>
        <button class="btn-bottom disabled" >修改</button>
    </div>
</form>

JS逻辑 #

import axios from 'axios'
export default {
  name:'ChangePassword',
  data: ()=> {
    return{
      email:"",
      oldpassword:"",
      newpassword:"",
      isSubmit: true,
      error: {
        newpassword: false,
      },
      passwordType: "password",
      passwordSchema: new PV(),
    }
  },
  created() {
    this.passwordSchema
      .is()
      .min(8)
      .is()
      .max(100)
      .has()
      .digits()
      .has()
      .letters();
  },
  watch: {
    newpassword: function(v) {
      this.checkForm();
    },
  },
  methods:{
    changepassword(){
        axios({
          url:'http://127.0.0.1:8080/account/changePassword',
          method:'patch',
          // 原错误写法：用data传递参数
          // data:{
          // 修正后写法：用params传递参数
          params:{
            email: this.email,
            oldPassword: this.oldpassword,
            newPassword: this.newpassword,
          },
        })
          .then(res=>{
            console.log(res)
            this.$router.push({ name:'Login' })
          })
          .catch(err=>{
            console.log(typeof this.oldpassword)
            console.log(this.oldpassword)
            console.log(this.newpassword)
            console.log(this.email)
            console.log(err)
          })
    },
  }
}

后端代码 #

@PatchMapping("/account/changePassword")
@ApiOperation(value = "修改密码")
public Object changePassword(@RequestParam(required = false) final String oldPassword,
                             @RequestParam(required = true) final String newPassword,
                             @RequestParam(required = true) final String email){
    Optional<User> userOpt = userDao.findByEmail(email);
    if(!passwordEncoder.matches(oldPassword, userOpt.get().getPassword())){
        throw new IllegalArgumentException("密码错误");
    }
    User user = new User(userOpt.get().getUid(), userOpt.get().getNickname(), email,
            passwordEncoder.encode(newPassword), userOpt.get().getIntroduction(), userOpt.get().getThumbnail(), userOpt.get().getRoles());
    userDao.save(user);
    final BasicResponse result = new BasicResponse();
    result.status = true;
    result.data = "success";
    ResponseEntity response = null;
    response = new ResponseEntity<>("OK", HttpStatus.OK);
    return response;
}

内容的提问来源于stack exchange，提问作者loare