Vue.js中钉钉jsapi权限验证
服务端golang前端 vue.js服务端钉钉验签参考https://blog.csdn.net/qq_36345096/article/details/83188194vue.js是单页面 切换组件的方式来进行 切换页面的 所以他的url是不变的比如你的首页是http://localhost:8080/index,当你切换页面的时候 url虽然在变化 但是其实vue.js本...
服务端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
更多推荐
所有评论(0)