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