zoukankan      html  css  js  c++  java
  • Vue获取钉钉免登陆授权码(vue中的回调函数实践)

    作者:故事我忘了
    个人微信公众号:程序猿的月光宝盒

    1.背景

    ​ 最近公司开发一个企业内部钉钉微应用,有个需求是动态获取钉钉免登陆code,之前从没玩过

    百度+google了半天还是c了个有bug的(免登陆code只能用一次,且在异步函数中调用),网上的蛇皮解决方案真是让人头秃........

    ​ 无奈今天是deadline,无更多时间c错误代码,只能昨晚请教我的室友---全南京最强大前端架构狮丶俊俊来帮我解决这一令屎上最强全栈学习退堂鼓一号选手丶小金棘手的问题

    ​ 然后推导出---这就是callback最佳实践!(主题是我编的,爱你是真的)

    2.技术栈

    Vue.js(cli3+)整合dingtalk-jsapi

    3.需求

    如上所述,需要动态获取一次性的钉钉免登陆code,我采用的是安装依赖的方法

    4.实现步骤

    4.1 配合webpack安装对应的npm包

    npm install dingtalk-jsapi

    4.2 抽取获得code的js方法

    图片

    import * as dd from 'dingtalk-jsapi';
    
    export function getCode(callback) {
      let corpId = '你公司的corpId';
      if (dd.env.platform !== "notInDingTalk") {
        dd.ready(() => {
          //使用SDK 获取免登授权码
          dd.runtime.permission.requestAuthCode({
            corpId: corpId,
            onSuccess: (info) => {
              // 根据钉钉提供的api 获得code后,再次调用这个callback方法
              // 由于是钉钉获取code是异步操作,不知道什么时候执行完毕
              // callback 函数会等他执行完毕后在自己调用自己
              callback(info.code)
            },
            onFail: (err) => {
              alert('fail');
              alert(JSON.stringify(err));
            },
          });
        });
      }
    }
    

    以上 getCode(callback){} 中的callback就是一个回调函数,稍后在使用中介绍使用方法

    4.3 在需要使用code的页面中引入js文件,导入方法

    图片

    4.4 在刚才的页面需要调用的方法里调用刚才导进来的js方法

    图片

    注意: 所有关于code的操作都要在此 回调函数中执行

    5.就提莫的结束了!!!

    所以,专业的是还是交给专业的人比较好,节省时间成本,但是谁让我NP的朋友多呢~

    以上~

  • 相关阅读:
    2018.5.5-6 GDCPC2018广东省赛 6/10 Rank12 Au
    网络流24题总结
    BZOJ4259 残缺的字符串 FFT
    [转]CodePlus 2018 3月赛 博弈论与概率统计
    Aiiage Camp Day6 J Sort
    Daily Scrum7
    Daily Scrum6
    Daily Scrum5
    Daily Scrum4
    Daily Scrum3
  • 原文地址:https://www.cnblogs.com/jsccc520/p/13693074.html
Copyright © 2011-2022 走看看