VUE中的接口摘要认证sign以及api请求公用同一js方法

摘要认证是什么

是一种由协议规定的Web服务器用来与网页认证信息协商的方法。它在数据发出前，先对其应用哈希函数，这相对更安全。下面记录一下我在项目中计算摘要认证的方法，在这里我使用了一个公用的api.js文件来写所有的接口请求

1、在根目录下新建api/index.js文件

2、在api/index.js文件中引入MD5及axios

import Axios from 'axios'

import md5 from 'js-md5';

3、写摘要认证函数

/***摘要认证***/

this.$url = function (cdUrl, datas) {

  const dataArry = []        //定义空数组

  var sign = ''                    //初始化sign

  var json = {}                    //定义空的json，用来存储数据值

  var strs = cdUrl.split('?')[1].split('&');            //将请求url中的head中的参数分割为数组

  if(datas){                        //如果是post数据，也就是说数据存在body里

    var datas = datas.split('&') ;

    strs = strs.concat(datas);        // 拿到它的数据，拼接到strs中

  }                                        //至此拿到get或post请求中的所有数据

  for (var i = 0; i < strs.length; i++) {    

    json[strs[i].split('=')[0]] = strs[i].split('=')[1];

  }    //遍历，将下标为数字的数组数据改为键值属性一一对应的json对象

  var strJson=Object.assign({},json);    //将数值传给strJson

    const keys = Object.keys(strJson).sort();    //将拿到的属性名进行排序

    for (let ki in keys) {    //根据属性名排序，将属性值串起来

        sign += strJson[keys[ki]];

    }

//此处是个人项目需要，没有token的话要拼一个空的 

  if(strJson.token == undefined){ strJson.token = "" }

    //sign加密赋值，根据token是否为空，拼接token

    if(strJson.token == ""){

        cdUrl =  cdUrl + '&sign=' + md5(sign)+'&token='+strJson.token

    }else{

        cdUrl =  cdUrl + '&sign=' + md5(sign)

    }

    return(cdUrl)

}

4、在axios请求中如何使用写好的摘要认证sign

接口公用域名：

const baseURL = 'api/'

Axios.defaults.baseURL = baseURL;

get：

export const getLessonInfo = (params) => {

    return Axios

    .get(this.$url("/?r=Mobile/Details_Courses/Assemble&setId="+params.setId ),{headers:{'version':'1.0.0'}})     

                           //            接口地址                                &      接口请求参数                版本号

    .then( res => res.data.data )}

post：

export const getLessonInfo = params => {

return Axios

                       //                  接口地址                     post参数 post参数

.post(this.$url("/?r=Mobile/Operation_Orders/Info",params), params ,

  {headers:{'version':'1.0.0','Content-Type':'application/x-www-form-urlencoded'}}) 

  //此处的 Content-Type是为了解决post 请求的问题，详见：post 请求的问题

.then( res => res.data )

}

//此处$url中包裹的post参数为配合摘要认证需求，写在此处，包裹外的post参数为axios语法中post参数的位置

5、然后在需要这些接口参数的页面当中，调取api公用文件，调用接口请求函数

//页面中引入api/index.js中的函数，每引入一个，就要在下面的 { }中写入该函数名

import { getLessonInfo } from '@/api'

//获取课程信息

    getLesson() {

      var params={        //请求参数

          setId: this.setId

      }

      getLessonInfo(params).then(res => {

          this.course = res;        //就能够拿到接口返回的参数了

    },

6、摘要认证完毕~！