uni-app中网络请求封装及登录授权

1. 请求封装及登录授权

// request.js

import Vue from 'vue'

Vue.prototype.login = function(username, password) {
	var _self = this;	
    uni.request({
      	url :`服务端地址（授权）`,
		method:'POST',
		header: {},
        data : JSON.stringify({
          code : res.code, 
          token : "login"
        }),
        success : function(res2){
          if (res2.statusCode === 200) { // 用户存在:存储token
            let token = 'Bearer ' + res2.data.access_token
            uni.setStorageSync(_self.sessionKey,token);
          } else { // 用户不存在:调转到授权页面
            uni.redirectTo({url:'/pages/authorize/authorize'});
            return false;
          }
        }
    })
}


Vue.prototype.sendRequest = function(param,backpage, backtype){
  var  _self = this, 
      url = param.url,
      method = param.method,
      header = {},
      data = param.data || {}, 
	  token = "",
      hideLoading = param.hideLoading || false;
        
  // 拼接完整请求地址
  var requestUrl = this.siteBaseUrl + url;
			
  // 固定参数:仅仅在小程序绑定页面通过code获取token的接口默认传递了参数token = login
	
  if(!data.token){ // 其他业务接口传递过来的参数中无token
	token = uni.getStorageSync(this.sessionKey); // 参数中无token时在本地缓存中获取
    if(!token){ // 本地无token需重新登录(退出时清缓存token)
      _self.login(backpage, backtype);
      return;
    }else{
      header.Authorization = token;
    }
  }
    
    // 请求方式:GET或POST(POST需配置header: {'content-type' : "application/x-www-form-urlencoded"},)
    if(method){
      method = method.toUpperCase(); // 小写改为大写
      if(method == "POST"){
        header = {'content-type' : "application/x-www-form-urlencoded"};
		header.Authorization = token
      }else{
        header = {'Accept' : "application/json"};
		header.Authorization = token
      }
    }
		
    // 用户交互:加载圈
    if (!hideLoading) {
       uni.showLoading({title:'加载中...'});
    }
		
    uni.request({
      url: requestUrl,
      method: method,
      header: header,
      data: data,
      success: res => {
        typeof param.success == "function" && param.success(res.data);
      },
      fail: (e) => {
        console.log("网络请求fail:" + JSON.stringify(e));
        uni.showModal({
          content:"" + e.errMsg
        });
        typeof param.fail == "function" && param.fail(e.data);
      },
      complete: () => {
        if (!hideLoading) {
          uni.hideLoading();
        }
        typeof param.complete == "function" && param.complete();
        return;
      }
   });
}


Vue.prototype.siteBaseUrl = '服务端地址（根目录）';

Vue.prototype.sessionKey = "myToken";

2. 登录授权页面

// index.js

<script>
import login from '../../utils/request.js'
export default {
  data() {
    return {
		username:'admin',
		password:'123456',

    };
  },
   onLoad() {
     this.login(this.username,this.password);
   }
 }
</script>

3. 其他页面

<script>
	export default {
		data() {
			return {
				personInfo:{},
			};
		},
		methods:{
			getPersonInfo(){
				this.sendRequest({
				  url : "服务端地址（根目录下地址）",
				  method : "GET",
				  data : {},
				  hideLoading : true,
				  success: (res) => { // 须为箭头函数，注意：this指向
						if(res.code === 0){
							this.personInfo = res.data.sysUser
						}
				  }
				})
			}
		},
		beforeMount(){
			this.getPersonInfo()
		},
	}
</script>