4.前端说明 - 网络请求 - 《WoShop跨境商城·部署文档》

基础通用参数:
前端
api调用
上传文件
nvue中请求
后端

基础通用参数:

token*   用户token 由后端生成并返回给前端，是用户身份的唯一表示  默认1：需要验证，0不验证
api_token*   前后端接口验证规则
client_id*   client_id:1 客户端表示
device_token* 设备唯一标示码

参数解释： apiRoute：api路由 data：请求参数

前端

采用flyio

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。多端支持：Node.js 、微信小程序、Weex 、React Native 、Quick App

// 文件路径：~/api/config.js
token和device_token写在request.body中
fly.interceptors.request.use(request => {
    request.body.token = uni.getStorageSync('token')
    request.body.device_token = uni.getStorageSync('devicetoken')
    return request
})
// post方法封装   
api_token 由url+当前格式化日期入2020-01-20+前端约定字段baseAppoint 再经过md5加密生成
let api_token = null;
function post(url, data = {}) {
  api_token = md5(
    `${url}${utils.formartDate()}${baseAppoint}`
  );
  return request(
    url,
    {
      ...data,
      api_token,
      client_id: 1,
    },
    "POST"
  );
}
 // 配置接口路 例：
export default{  
     getreadprofile(data) {
        return post(apiRoute, data);
      },
    getAddressdel(data) {
        return post(apiRoute, data);
      },
     ....
}

api调用

 // 先在main.js中做全局挂载 
import api from "./api"; 
Vue.prototype.$http = api; //全局挂载api
// 具体引用
this.$http.getreadprofile(data).then(res=>{
        console.log(res)
      // res:返回接口
   )

上传文件

上传文件部门进一步封装了uview-ui 上传组件

// ~/components/upLoader.vue
上传地址和上传参数已经上传执行已经上传成功后返回值 已经在组件内部封装好，可直接调用
<upLoader ref="upLoader" :width="750" :height="500"></upLoader>
获取文件上传返回结果： const uploadedCoverImg = this.$refs.upLoader.resultSrc

nvue中请求

在pages/live/live.js 封装了在nvue中的请求方法 http()
  http(path = "", params = {}, method = "POST") {
      const token = uni.getStorageSync("token");
      return new Promise((resolve, reject) => {
        uni.request({
          url: `${this.baseUrl}/${path}?t=${new Date().getTime()}`,
          method: method,
          data: {
            api_token: md5(
              `${path}${this.formartDate()}${SECRETKEY}`
            ),
            client_id: 1,
            token,
            ...params,
          },
          success: (res) => {
            resolve(res);
          },
          fail: (err) => {
            reject(err);
          },
        });
      });
    },
    //调用方法：
    // 
  this.http(apiRoute, data).then(res => {
      console.log(res)
      // res:返回接口
})

后端

接口验证方法：/application/apicloud/model/Gongyong.php

/*
     * 接口验证
     * @param $isToken 是否验证用户token，默认1：需要验证，0不验证
     */
   public function apivalidate($isToken = 1){
       if(input('post.client_id') && input('post.api_token')){
           $client_id = input('post.client_id');
           $api_token = input('post.api_token');
           $module = request()->module();
           $controller = request()->controller();
           $action = request()->action(true);
           $secretstr = $module.'/'.$controller.'/'.$action;
           $client_secret = Db::name('secret')->where('id',$client_id)->value('client_secret');
           if($client_secret){
               $api_token_server = md5($secretstr.date('Y-m-d', time()).$client_secret);
               if($api_token != $api_token_server){
                   $result = array('status'=>400,'mess'=>'接口请求验证失败','data'=>array('status'=>400));
               }else{
                   //验证个人token
                   if($isToken){
                       //验证设备token
                       $device_token = input('post.device_token');
                       $token = input('post.token');
                       $valitk = $this->checktokens($token,$device_token);
                       if($valitk['status'] != 90001){
                           if($valitk['status'] == 90003){
                            $result = array('status'=>400,'mess'=>'账号已在其他设备上登录，请重新登录','data'=>array('status'=>400)); 
                           }else{
                            $result = array('status'=>400,'mess'=>'身份验证失败','data'=>array('status'=>400));
                           }
                       }else{
                           $result = array('status'=>200,'mess'=>'接口请求验证成功','user_id'=>$valitk['user_id']);
                       }
                   }else{
                       $result = array('status'=>200,'mess'=>'接口请求验证成功','data'=>array('status'=>200));
                   }
               }
           }else{
               $result = array('status'=>400,'mess'=>'接口请求验证失败','data'=>array('status'=>400));
           }
       }else{
           $result = array('status'=>400,'mess'=>'接口请求验证失败','data'=>array('status'=>400));
       }
       return $result;
   }
   public function checktokens($token,$device_token=""){
       $rxins = Db::name('rxin')->where('token',$token)->find();
       if (!empty($rxins)){
           $yhinfos = Db::name('member')->where('id',$rxins['user_id'])->where('checked',1)->field('id,appinfo_code')->find();
           if($yhinfos){
               //查看当前用户表中存储的设备clientid值与传递的device_token值是否一致，不一致提示在其他设备登录，请重新登录
               if($device_token && $device_token != $yhinfos['appinfo_code']){
                    $valitoken = array('status'=>90003,'user_id'=>$rxins['user_id']);
               }else{
                    $valitoken = array('status'=>90001,'user_id'=>$rxins['user_id']);
               }
           }else{
               $valitoken = array('status'=>90002,'user_id'=>0);
           }
       }else{
           $valitoken = array('status'=>90002,'user_id'=>0);
       }
       return $valitoken;
   }

调用方式：

继承Common控制器，如：class Login extends Common 在接口开始位置加入api_token验证方法

需要获取$user_id的情况

$tokenRes = $this->checkToken();
if($tokenRes['status'] == 400){ // 400返回错误描述
    datamsg(LOSE,$tokenRes['mess'],$tokenRes['data']);
}else{ // 成功则返回$user_id
    $user_id = $tokenRes['user_id'];
}

不需要获取$user_id的情况

$tokenRes = $this->checkToken(0);  // 传入0，代表不需要获取$user_id
if($tokenRes['status'] == 400){ // 400返回错误描述
    datamsg(LOSE,$tokenRes['mess'],$tokenRes['data']);
}

 function datamsg($code, $msg, $result = '')
    {
        $data['status'] = $code;
        $data['mess'] = $msg;
        is_object($result)?$result = $result->toArray():'';
        if (is_array($result)) {
            foreach ($result as $key => $value) {
                if ($value===null) {
                    $result[$key] ='';
                }
            }
        }
        $data['data'] = result_type($result);
        echo json_encode($data);die;
    }
成功状态
datamsg(WIN,'文本描述',array());
失败状态
datamsg(LOSE,'文本描述',array());