详解如何在Vue项目中发送jsonp请求
时间：2021-07-16 10:42:47|栏目：vue|点击： 次
起因
公司临时要支撑河南的一个项目，做一个单点登录的功能。
简单来说，就是以下3步
客户方点击某个按钮进入我们的页面a
在页面a中由前端发送一个jsonp请求到客户方，得到一个token值
前端得到token值后向自己后端发送一个请求，后端根据token去redis(token的值就是redis里的key)里取值(key=token的值，value=用户信息等)判断用户是否已登陆，若登陆则根据取到的工号等信息后端模拟登陆，若没有登陆，则跳转到客户方登陆页面
怎么做
发送jsonp请求，axios官方貌似并不支持，所以排除🙅🏻♀️
经过辗转Google，发现了*vue-jsonp*这个插件
使用vue-jsonp
官方地址：vue-jsonp
下载
npm install vue-jsonp --save-dev
引入项目
import Vue from 'vue' import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp)
然后，我们就可以在项目中愉快地使用啦✨✨
项目中xxx.vue文件
<script>
export default {
data() {...},
created() {
//
this.getJson()
},
mounted() {
window.jsonpCallback = (data) => {
console.log(data.token)
// 调用获取后端token的方法
this.getToken(data.token)
}
},
methods: {
getJson() {
this.$jsonp(this.url, {
callbackQuery: "callbackParam",
callbackName: "jsonpCallback"
})
.then((json) => {
// 返回的jsonp数据不会放这里，而是在 window.jsonpCallback
console.log(json)
})
},
getToken(token) {
this.axios.post('/xxxurl')
.then((res) => {
// success 之后就正常登陆了
})
}
}
}
</script>
是不是so easy 🤡但是真的整了一晚上才整出来，谁能知道jsonp的返回值在then里返回不了呢，打印也打印不出来。。。
栏 目：vue
下一篇：浅谈vuex之mutation和action的基本使用
本文标题：详解如何在Vue项目中发送jsonp请求
本文地址：http://www.codeinn.net/misctech/157950.html
