Vue獲取釘釘免登陸授權碼(vue中的回調函數實踐)

作者: 故事我忘了^￠
個人微信公眾號: 程序猿的月光寶盒

---

目錄

• 1.背景
• 2.技術棧
• 3.需求
• 4.實現步驟
  • 4.1 配合webpack安裝對應的npm包
  • 4.2 抽取獲得code的js方法
  • 4.3 在需要使用code的頁面中引入js文件,導入方法
  • 4.4 在剛才的頁面需要調用的方法里調用剛才導進來的js方法
• 5.就提莫的結束了!!!

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的朋友多呢~

以上~