偏前端 - vue-cli(axios請求數據==》token+按接口參數順序（參數值拼接base64）-> MD5)

 token+按接口參數順序（參數值拼接base64）-> MD5)

 

請教於「喵咪」，再此特別鳴謝！~

特別強調：import qs from qs; 這個內部方法必定要用哦。參數簽名+base64+md5都成功的狀況華。接口仍是爆500，就是和這個有關係啦。

我也是第一次用vue的axios你們能夠多交流哦，加我qq,給我更好的建議吧

 

 

 

/*main.js*/

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'
import qs from 'qs' //至關於JSON.stringify(),跨域？
import axiosServer from './assets/axiosFilter/axiosFilter'


import './assets/mui/css/mui.min.css'
import mui from './assets/mui/js/mui.min.js'
Vue.prototype.mui=mui;
Vue.prototype.$qs=qs;
Vue.prototype.$http = axiosServer;

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

　　

 

/*axiosFilter.js*/

import axios from 'axios'; //安裝axios
import md5 from 'js-md5'; //md5
import mui from '../mui/js/mui.min.js'; //mui插件
import qs from 'qs'; //相似於JSON.stringify(),安裝便可。這個必定要用哦！！！！！！
let Base64 = require('js-base64').Base64;  //base65加密
var orginusrl; //不加域名的，請求api的url
const baseUrl = "http://www.xxxx.com/mobile/"; 設置統一請求的api域名前綴



/**
* 建立axios實例
*/

const axiosServer = axios.create({
tiemout:10000, //超時時間
headers:{
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}
})

/**
* 響應攔截器
*/
axiosServer.interceptors.response.use(
(json) => {
//判斷sys返回結果
json = json.data;

if(json.sys.code == 200 ){
if(json.biz.code == 200){
//登陸請求成功後寫入token,
if(orginusrl == 'user/loginByMobileWithNoImgCode' || orginusrl == 'user/loginWithNoImgCode'){
states.t = json.headers['Authorization'];
setState(states);
}
//而後返回數據
return json.biz;
}else if(json.biz.code == 300){
mui.alert(json.biz.message);
return ;
}else{
mui.alert(json.biz.message);
return ;
}
}else if(json.sys.code == 403){
//請先登陸
states.t = '';
setState(states);
//跳轉到登陸頁面 這裏本身寫吧
linkToPage('login');

}else{
mui.alert(json.sys.msg);
return;
}
}
)

/**
* 請求攔截器
*/
axiosServer.interceptors.request.use(
(config) => {
//設置請求頭
var headerstate = localStorage.getItem('$state');
if(headerstate){
config.headers['Authorization'] = JSON.parse(localStorage.getItem('$state')).t;
}

orginusrl = config.url;
config.url = baseUrl+ orginusrl;
config.data.signature= paramsToStr(config.data);
config.data = qs.stringify(config.data);
return config;
}
)

 

/**
* 儲存token
*/
var setState = (state) => {
state = state || {};
localStorage.setItem('$state', JSON.stringify(state));
};

/**
* 提取token
*/
var getState = () => {
var state = JSON.parse(localStorage.getItem('$state') || "{}");
state = mui.extend(true, {t: ''}, state);
return state;
};

/**
* 簽名函數
*/

var signature = (istoken,param) => {
var state = getState();

if(param == undefined || param== null){
param = '';
}
var str = '';
if(istoken){
str = state.t + Base64.encode(param);
}else{
str = Base64.encode(param);
}
return md5(str);
};

/**
* 參數處理函數 
*/
var paramsToStr = (data) =>{
var param = data;
var str = ''
if(param){
for(var value in param){//
if(value != 'istoken'){ 
str = str + param[value];
} 
}
str = signature(data.istoken,str);
return str;
}


}

export default axiosServer;

 

　

/*home.vue*/

/**
	 * 獲取首頁借款列表
	 */
	that.$http({
		method: 'post',
		url: 'borrow/GetBorrowList',
		data:{
			 "page_index": "1",
			 "page_size": "3"
		}
	}).then(function(response){
			that.borrowItems = response.data;
		}).catch(function(error){
			    console.log(error);
	})

 

看看headers

 

在看下數據結構　　

 

http://www.javashuo.com/article/p-recszfcd-ku.html 歡迎你們在我學習的道路上，給出更好的建議