Vue.js中钉钉jsapi权限验证

服务端golang

前端 vue.js

服务端钉钉验签参考 https://blog.csdn.net/qq_36345096/article/details/83188194 

vue.js是单页面 切换组件的方式来进行 切换页面的 所以他的url是不变的 

比如你的首页是http://localhost:8080/index,当你切换页面的时候 url虽然在变化 但是其实vue.js本身的url是不变的,在不刷新页面的情况下不管路由如何变化 都是http://localhost:8080/index 也就是你第一次进入你的应用的时候的地址。

了解了vue.js路由问题以后 我们开始进行做钉钉的jsapi权限验证

第一步、

在vue.js中的全局 index.html  

移动端 jspai 

<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.3.0/dingtalk.open.js"></script>

pc端 jspai

<script src="https://g.alicdn.com/dingding/dingtalk-pc-api/2.7.0/index.js"></script>

第二步、

在app.vue methods 写一个function中去获取服务器的验签参数 

that.$global 是我挂载在Vue中的一个 全局变量 这样方便修改

我想服务器发送一个url地址

服务接受这个url地址然后进行验签返回

var urls = that.$global.urls
    console.log(urls)
    that.$axios({
      method: "post",
      url: that.$global.getsign,
      params: {url: urls}
    }).then(res => {
      that.$global.corpid = res.data.corpid
      dd.config({
        agentId: res.data.agentid, // 必填，微应用ID
        corpId: res.data.corpid, //必填，企业ID
        timeStamp: res.data.time, // 必填，生成签名的时间戳
        nonceStr: res.data.noncestr, // 必填，生成签名的随机串
        signature: res.data.sign, // 必填，签名
        jsApiList: ['device.notification.alert', 'device.notification.confirm',
          'biz.contact.choose', 'device.notification.actionSheet',
          'biz.user.get', 'device.notification.toast', 'biz.util.uploadImage',
          'biz.customContact.multipleChoose', "biz.contact.choose"
        ]
      });
      dd.ready(function () {
        dd.biz.user.get({
          corpId: res.data.corpid,
          onSuccess: function (info) {
            that.$global.userid = info.emplId
          }
        })
      })
    })

这样我就可以在项目里面调用 钉钉的jsapi了

但是还有一个问题,页面刷新以后 url地址会变，因为Vue.js切换页面的时候url地址其实是不会改变的，但是我们自己刷新浏览器以后Vue.js 那么Vue.js的实际url地址就会改变。

我的思路是监听当前页面刷新 然后获取刷新页面以后的url地址 再去请求服务器验签！！！！这样一来就没有问题了

  (修：小智)

在app.js的created（）方法里面加入如下一行代码 每次刷新以后 可以获取到刷新后的url地址 并存进全局变量 验签的方法去取这个全局变量 就行了

this.$global.urls=window.location.href