詳解如何在Vue項(xiàng)目中發(fā)送jsonp請(qǐng)求
起因
公司臨時(shí)要支撐河南的一個(gè)項(xiàng)目，做一個(gè)單點(diǎn)登錄的功能。
簡(jiǎn)單來(lái)說(shuō)，就是以下3步
客戶方點(diǎn)擊某個(gè)按鈕進(jìn)入我們的頁(yè)面a
在頁(yè)面a中由前端發(fā)送一個(gè)jsonp請(qǐng)求到客戶方，得到一個(gè)token值
前端得到token值后向自己后端發(fā)送一個(gè)請(qǐng)求，后端根據(jù)token去redis(token的值就是redis里的key)里取值(key=token的值，value=用戶信息等)判斷用戶是否已登陸，若登陸則根據(jù)取到的工號(hào)等信息后端模擬登陸，若沒(méi)有登陸，則跳轉(zhuǎn)到客戶方登陸頁(yè)面
怎么做
發(fā)送jsonp請(qǐng)求，axios官方貌似并不支持，所以排除🙅🏻♀️
經(jīng)過(guò)輾轉(zhuǎn)Google，發(fā)現(xiàn)了*vue-jsonp*這個(gè)插件
使用vue-jsonp
官方地址：vue-jsonp
下載
npm install vue-jsonp --save-dev
引入項(xiàng)目
import Vue from 'vue' import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp)
然后，我們就可以在項(xiàng)目中愉快地使用啦✨✨
項(xiàng)目中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ù)不會(huì)放這里，而是在 window.jsonpCallback
console.log(json)
})
},
getToken(token) {
this.axios.post('/xxxurl')
.then((res) => {
// success 之后就正常登陸了
})
}
}
}
</script>
是不是so easy 🤡但是真的整了一晚上才整出來(lái)，誰(shuí)能知道jsonp的返回值在then里返回不了呢，打印也打印不出來(lái)。。。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開(kāi)發(fā)中我們經(jīng)常會(huì)遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下2024-06-06
vue el-table字段點(diǎn)擊出現(xiàn)el-input輸入框,失焦保存方式
這篇文章主要介紹了vue el-table字段點(diǎn)擊出現(xiàn)el-input輸入框,失焦保存方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)橫向時(shí)間軸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Vue中使用Printjs插件實(shí)現(xiàn)打印功能
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無(wú)需離開(kāi)界面，也無(wú)需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實(shí)現(xiàn)打印功能,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之修飾符，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了vue 之 css module的使用方法，css module目的為所有類名重新生成類名，有效避開(kāi)了css權(quán)重和類名重復(fù)的問(wèn)題，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12