vue项目授权美团商家大众点评

859 阅读1分钟

商家点评文档中心:

open.dianping.com/document/v2…

公司的需求是创建订单的时候使用美团券号,如果没有授权,先进行授权美团商家点评,如果已经授权,就进行美团券号的核销。

授权的过程:

1 先跳转到授权的UI组件
类似于这样
![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6efcd217a89432898a9d3be237d2092~tplv-k3u1fbpfcp-zoom-1.image)
2 授权成功之后返回到回调地址redirect_url,带着auth_code
3 把redirect_url和auth_code作为参数传给接口(调接口成功说明授权成功)

  1. 点击验证按钮判断是否授权
toEmpower() {
      var appKey;   //文档上有写
      isEmpower().then(res => {  //判断是否授权的接口,会返回appKey
          appKey = res.data.appKey
          var url = window.location.href
          //authStatus 是否授权的字段  false为未授权
          if(res.data.authStatus == false){
          	//跳转到授权UI组件
            window.location.href = `https://e.dianping.com/dz-open/merchant/auth?app_key=${appKey}&state=true&redirect_url=${encodeURIComponent(url)}`
            //授权成功之后跳转到回调地址redirect_url
            this.getQuery()
          } else {
          	//成功授权之后核销美团券的方法
            this.testMeiQuan()
          }
      })
    },
//授权成功后获取url上的参数
    getQuery() {
      var url = window.location.href;
      //切割URL字符串,获取参数auth_code和redirect_url
      if(url.indexOf('?') != -1){
        let arr = url.split('?')
        let arr1 = arr[1].split('&')
        this.auth_code = arr1[0].split('=')[1]
        this.state = arr1[1].split('=')[1]
        this.redirect_url = arr[0]
      }
      if(this.auth_code && this.redirect_url)  {
        let data = {
          auth_code: this.auth_code,
          redirect_url: this.redirect_url
        }
        accessTok(data).then(res => {  //把两个参数传给接口
        	//授权成功
        })
      }
    },

授权成功之后会跳转到重定向的页面(我这里就是跳转之前的页面) 所以我在进入这个页面之后要拿到两个参数

activated(){
	this.getQuery()
}