詳解如何在Vue項目中發(fā)送jsonp請求
更新時間：2019年10月25日 15:39:52 作者：樂多
這篇文章主要介紹了詳解如何在Vue項目中發(fā)送jsonp請求，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
起因
公司臨時要支撐河南的一個項目，做一個單點登錄的功能。
簡單來說，就是以下3步
客戶方點擊某個按鈕進入我們的頁面a
在頁面a中由前端發(fā)送一個jsonp請求到客戶方，得到一個token值
前端得到token值后向自己后端發(fā)送一個請求，后端根據(jù)token去redis(token的值就是redis里的key)里取值(key=token的值，value=用戶信息等)判斷用戶是否已登陸，若登陸則根據(jù)取到的工號等信息后端模擬登陸，若沒有登陸，則跳轉(zhuǎn)到客戶方登陸頁面
怎么做
發(fā)送jsonp請求，axios官方貌似并不支持，所以排除🙅🏻♀️
經(jīng)過輾轉(zhuǎn)Google，發(fā)現(xiàn)了*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)
// 調(diào)用獲取后端token的方法
this.getToken(data.token)
}
},
methods: {
getJson() {
this.$jsonp(this.url, {
callbackQuery: "callbackParam",
callbackName: "jsonpCallback"
})
.then((json) => {
// 返回的jsonp數(shù)據(jù)不會放這里，而是在 window.jsonpCallback
console.log(json)
})
},
getToken(token) {
this.axios.post('/xxxurl')
.then((res) => {
// success 之后就正常登陸了
})
}
}
}
</script>
是不是so easy 🤡但是真的整了一晚上才整出來，誰能知道jsonp的返回值在then里返回不了呢，打印也打印不出來。。。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE使用vue?create命令創(chuàng)建vue2.0項目的全過程
vue-cli是創(chuàng)建Vue項目的一個腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項目的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-07-07
教你60行代碼實現(xiàn)一個迷你響應(yīng)式系統(tǒng)vue
這篇文章主要為大家介紹了教你60行代碼實現(xiàn)一個迷你響應(yīng)式系統(tǒng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-03-03
詳解element-ui表格的合并行和列(非常細節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關(guān)于element-ui表格的合并行和列的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue的自定義組件不能使用click方法的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
工作中日常筆記,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用swiper的完整版教程,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue el-upload單圖片上傳功能實現(xiàn),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue 清空input標簽 中file的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細代碼,本文通過實例代碼介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要為大家介紹了vue pdf二次封裝解決無法顯示中文問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了Vue學習筆記之計算屬性與偵聽器用法,結(jié)合實例形式詳細分析了vue.js計算屬性與偵聽器基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下2019-12-12