Vue对接Spring Security

Vue对接Spring Security:

      使用axios进行登录，一直无法登录，提示用户名密码错误，但是用PostMan测试正常，代码如下：

axios.post("api/login",this.user)

      Spring Security默认从params中获取数据（可以直接凭借到url上也行，但是不安全，所以采用qs将数据放到FormData中） , axios.post方法所有请求数据都放在requestBody中 , 即前端request payload中。

      使用 qs 的 stringify 方法 , 传输的数据变为了Form Data形式。
      qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

1.qs安装

npm install qs / cnpm install qs (安装了淘宝镜像的才可以使用)

2.qs 全局引入

//在main.js引入qs
import  qs from 'qs'
//配全局属性配置，在任意组件内可以使用this.$qs获取qs对象
 Vue.prototype.$qs = qs

3.使用qs

//需要设置提交方式为Form Data(键值对)
axios.post("api/login",this.$qs.stringify(this.user),{headers:{'Content-Type': 'application/x-www-form-urlencoded'}})

4.JSON中的stringfy()方法和qs中的stringfy()方法区别

json:{"username":"zhangsan","password":"333333"}
qs:username=zhangsan&password=333333