詳解如何在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前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開發(fā)中我們經(jīng)常會遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下2024-06-06
vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式
這篇文章主要介紹了vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)旋轉(zhuǎn)木馬動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
如果我們在每個組件中去重復定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2022-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)橫向時間軸，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Print.js 主要是為了幫助我們直接在我們的應用程序中打印 PDF 文件，無需離開界面，也無需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實現(xiàn)打印功能,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了Vue.js學習筆記之修飾符，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue 之 css module的使用方法，css module目的為所有類名重新生成類名，有效避開了css權(quán)重和類名重復的問題，非常具有實用價值，需要的朋友可以參考下2018-12-12