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