?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

?

在看下數據結構　　

?

https://www.cnblogs.com/Lrn14616/p/10956726.html?歡迎大家在我學習的道路上，給出更好的建議

　

轉載于:https://www.cnblogs.com/Lrn14616/p/10956726.html

總結

以上是生活随笔為你收集整理的偏前端 - vue-cli(axios请求数据==》token+按接口参数顺序（参数值拼接base64）- MD5)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。