前后端分离spring security中loadUserByUsername参数name为空_spring security loaduserbyusername 用户名为空

原因：因为前端这样发送的请求数据格式是json格式的数据，而SpringSecurity的配置则是需要提交的数据形式是表单格式的

解决：需要在前端发送的axios请求中设置成表单提交的格式，并且提交的数据要进行转换成字符串的形式。

1. 检查前端传回的参数名称是否是username和password，spring security默认的参数名称是username和password，如果不是，可能更改前端的形参，也可以在WebSecurityConfigurerAdapter的configure实现接口里面添加你的参数名称

在后端设置前端传回的参数名称

http.
   ...//省略
  .formLogin()
  .usernameParameter("username")
  .passwordParameter("password")
  .permitAll()
  ...//省略
1
2
3
4
5
6
7

2. 更改前端js有两种方式

更改前

	//登录
    login() {
      //1.验证校验规则
      this.$refs.loginFormRef.validate(async vaild => {
        if (!vaild) return;
        const {data: res} = await this.$http.post("login", this.loginForm)//访问后台
        if (res.flag == "ok") {
          this.$message.success("登陆成功！！！");
          // console.log(res.user);
          window.sessionStorage.setItem("user", res.user);//将信息存在session中
          await this.$router.push({path: "/home"})//页面路由跳转
        } else {
          this.$message.error("登陆失败");
        }
      })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

更改后（第一种）

    //登录
    login() {
      //1.验证校验规则
      this.$refs.loginFormRef.validate(async vaild => {
        if (!vaild) return;
        let ret = ''
        for (let it in this.loginForm) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(this.loginForm[it]) + '&'
        }
        const {data: res} = await this.$http.post("login", ret)//访问后台
        console.log(res)
        if (res.success == true) {
          this.$message.success("登陆成功！！！");
          // console.log(res.user);
          window.sessionStorage.setItem("user", res.data);//将信息存在session中
          await this.$router.push({path: "/home"})//页面路由跳转
        } else {
          this.$message.error("登陆失败");
        }
      })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

更改后（第二种）

    //登录
    login() {
      //1.验证校验规则
      this.$refs.loginFormRef.validate(async vaild => {
        if (!vaild) return;
        this.$http.post("login", qs.stringify(this.loginForm), {
          // 设置成表单提交
          headers: {"Content-Type": "application/x-www-form-urlencoded"}
        }).then(res => {
          // 操作。。。
          console.log(res.data)
          if (res.data.success == true) {
            this.$message.success("登陆成功！！！");
            window.sessionStorage.setItem("user", res.data.user);//将信息存在session中
            this.$router.push({path: "/home"})//页面路由跳转
          } else {
            this.$message.error("登陆失败！！！");
          }
        })
      })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

以下内容可以忽略

发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】