vue-钉钉H5微应用单点登录,获取用户信息踩坑指南

最近接到一个新任务,H5开发俩页面,嵌入钉钉,作为一个H5微应用,需要实现免登录,也就是不要进入微应用得时候再走一个登录页面,首页+详情页,详情页带一个分享给钉钉好友的功能。

首先想到既然俩页面需要需要获取用户信息,并且还有个分享给好友功能,是不是要在路由拦截处添加获取用户信息,就是用了router.beforeEach路由拦截,写着写着发现陷入了死循环,而且发现首页的免登和详情页的获取用户信息调用的钉钉api不是同一个,显然得分开写了,所以放弃了这个bug想法。

根据钉钉api结合自己思考实现方式:

钉钉官方文档:开发前必读 - 钉钉开放平台

1、首先需要安装钉钉对应的依赖包

vue-钉钉H5微应用单点登录,获取用户信息踩坑指南_第1张图片

2、在钉钉后台管理平台中配置进入首页得地址后面携带参数http://xxx首页地址?corpid=${CORPID}$,通过获取corpid,调用钉钉以下方法,可以解析到一个免登授权码code,前端拿到这个授权码之后,调用后端接口,接口返回h5首页携带token的重定向地址url,直接使用location.href=url即可,在首页的created中调用methods中申明的方法:

你可能感兴趣的:(vue.js,前端)