背景：
小程序要调用springboot的后台登录接口，接口是Spring Security实现的，对接接口时发现获取不到username和password。
问题原因：
Spring Security WebSecurityConfig中设置了
http.formLogin()
前端却没有使用表单提交。
解决方法：
安装qs
npm install qs
1
在main.js中添加
import qs from 'qs'
Vue.prototype.$qs=qs最后修改请求
onSubmit() {
this.$axios.post("http://localhost:8082/login",
this.$qs.stringify(this.formLabelAlign),{
headers:{
'Content-Type':'application/x-www-form-urlencoded'
}
}).then(res => {
console.log(res);
})
}
在此点击登录，就可看到后台获取到了用户名和密码
qs使用方法：
单页模式：
<body>
<div id="app">
<div>
<span>username：</span>
<input type="text" v-model='username'>
</div>
<div>
<span>password：</span>
<input type="text" v-model='password'>
</div>
<button @click='sub'>提交</button>
<br>
<br>
<!-- 登陆成功后再访问这个 api -->
<button @click="sayHello()">测试访问需要权限的 api</button>
<br>
<br>
<button @click="logout()">退出登陆</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const qs = Qs // 引入QS库把请求参数转成表单形式
let app = new Vue({
el: '#app',
created() {
axios.defaults.baseURL = 'http://127.0.0.1:8080/'
// 因为默认 Spring Security 是通过 Cookie 和 Session 来验证身份的，所以需要配置携带 Cookie
axios.interceptors.request.use(config => {
config.withCredentials = true;
return config;
});
},
data: {
password: 'admin',
username: 'admin'
},
methods: {
sub() {
axios.post('/doLogin', qs.stringify({
username: this.username,
password: this.password
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then((result) => {
console.log(result.data);
}).catch((err) => {
console.log(err);
});
},
sayHello() {
axios.get('/hello')
.then((result) => {
console.log(result.data);
}).catch((err) => {
console.log(err);
});
},
logout() {
axios.post('/doLogout')
.then((result) => {
console.log(result.data);
}).catch((err) => {
console.log(err);
});
}
},
})
</script>
</body>
本质就是把参数改成url拼接的方式传递。
参考：Spring Security 使用自带的 formLogin
注意：本文归作者所有，未经作者允许，不得转载
