vue 配合钉钉鉴权及钉钉 API 使用方法

 1、项目安装 dingtalk-jsapi ，命令如下：

npm install dingtalk-jsapi --save

2、在需要的位置引入使用：

import * as dd from 'dingtalk-jsapi'; // 此方式为整体加载，也可按需进行加载

3、在 App.vue 中添加鉴权方法，如下：，

<script>
import * as dd from 'dingtalk-jsapi'
import api from './api/dd'
export default {
  created(){
    this.getAuth()
  },
  watch:{
    $route(to,from){
      // console.log(from.path) // 从哪来
      // console.log(to.path) // 到哪去
      this.getAuth()
    }
  },
  methods: {
    getAuth(){
      let params = {
        url: 'http://10.xx.xx.xx/meal/', // 这个地址要与网站访问地址保持一致
        appTypeEnum: 'MEAL_ORDER'
      }
      api.queryAuthSign(params).then((res) => {
          dd.config({
              agentId: res.data.data.agentId, // 必填，微应用ID
              corpId: res.data.data.corpId,//必填，企业ID
              timeStamp: res.data.data.timeStamp, // 必填，生成签名的时间戳
              nonceStr: res.data.data.nonceStr, // 必填，自定义固定字符串。
              signature: res.data.data.signature, // 必填，签名
              type:0,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
              jsApiList : [
                  'biz.util.uploadAttachment', // 上传附件到钉盘/从钉盘选择文件
                  'biz.cspace.preview', // 图片预览
              ] // 必填，需要使用的jsapi列表，注意：不要带dd。
          });
          dd.error(function (err) {
              alert('dd error: ' + JSON.stringify(err));
              console.log('dd error: ' + JSON.stringify(err));
          })//该方法必须带上，用来捕获鉴权出现的异常信息，否则不方便排查出现的问题
      })
    }
  },
}
</script>

解析：第四步是通过后端提供的一个接口获取需要鉴权的一些参数信息，jsApiList 数组里边是鉴权时候需要调用的接口

4、在需要的页面中使用 jsApi 的方法，如下：

<script>
import api from '../../api/user'
import * as dd from 'dingtalk-jsapi'; // 引入钉钉 JSAPI
export default {
    data() {
        return {
            fileList: [], // 附件列表
            dingId: '', // 钉盘id
        }
    },
    created(){
       
    },
    methods:{
        // 获取钉盘id信息
        getSpaceId(){
            let params = {
                appTypeEnum: 'MEAL_ORDER'
            }
            api.querySpaceId(params).then((res) => {
                this.dingId = res.data.data;
            })
        },
        // 上传至钉盘
        upLoadBtn(){
            let _this = this;
            let corpId = 'dingxxxxxxxxxxx'
            dd.biz.util.uploadAttachment({
                corpId: corpId,
                types: ["photo"],
                image: {"multiple":true,"compress":false,"max":9,"spaceId": this.dingId},
                compress: true,
                multiple: false,
                max: 9,
                isCopy: 0,
                spaceId: this.dingId,
                onSuccess : function(res) {
                    // 调用成功时回调
                    res.data.map((item) => {
                        _this.fileList.push(item);
                    })
                    
                },
                onFail : function(err) {
                    // 调用失败时回调
                    console.log(err)
                }
            });
        },
        // 预览图片
        previewBtn(item){
            let corpId = 'dingxxxxxxxxxxx'
            dd.biz.cspace.preview({
                corpId: corpId,
                spaceId: item.spaceId,
                fileId: item.fileId,
                fileName: item.fileName,
                fileSize: item.fileSize,
                fileType: item.fileType,
                onSuccess : function(res) {
                    console.log(res,'666878');
                },
                onFail : function(err) {
                    console.log(err,'err');
                }
            });
        },
    }
}
</script>

至此，鉴权及钉钉 api 接口使用完成！