详解如何在Vue项目中发送jsonp请求

起因

公司临时要支撑河南的一个项目,做一个单点登录的功能。

简单来说,就是以下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里返回不了呢,打印也打印不出来。。。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/1063.html