Axios发送请求前,动态设置从服务端异步获取得token及签名

vue项目前后端分离,采用axios为异步请求的库,为了解决Rest接口访问的安全问题,需要在每次发送请求前在请求头设置一个token和签名,以在服务端根据token和签名对访问的合法性做校验。

在axios的请求拦截器做这个逻辑,具体代码如下。

    /**
 * http配置
 */

import axios from 'axios';

var timestamp = '';
var headtoken = '';
var sign = '';
var domain = '/bop-web';
var instance = axios.create();

function buildParamStr(param, timestamp, url, signtoken) {

  param["timestamp"] = timestamp;
  param["url"] = url;
  param["signtoken"] = signtoken;
  var keys = [];
  var paramstr = "";
  for (var paramkey in param) {
    keys.push(paramkey);
  }
  keys.sort();
  for (var i = 0; i < keys.length; i++) {
    var itemkey = keys[i];
    if (typeof(param[itemkey]) === 'object') {
      param[itemkey] = JSON.stringify(param[itemkey]);
    }
    if (i === keys.length - 1) {
      paramstr += itemkey + "=" + param[itemkey];
    } else {
      paramstr += itemkey + "=" + param[itemkey] + "&";
    }
  }
  // console.log(paramstr);
  return paramstr;
}
function bulidSign(paramdata, timestamp, url, signtoken) {
  var paramStr = buildParamStr(paramdata, timestamp, url, signtoken);
  delete paramdata.signtoken;
  delete paramdata.timestamp;
  delete paramdata.url;
  var hash = CryptoJS.SHA256(paramStr);
  // console.log(hash.toString());
  return hash.toString();
}
function getToken() {
  return instance({url: '/token/getToken', type: 'get'});
}

// 超时时间
axios.defaults.timeout = 5000;

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

axios.interceptors.response.use((res) => {
  if(res.headers.sessionstatus === 'timeout') {
    var url = btoa(window.location.href);
    window.location.href = domain + "/login/logindo?r=" + url;
  }
  return res;
}, (error) => {
   console.log(axios.interceptors.response);
  
  return Promise.reject(error);
});


axios.interceptors.request.use(
  config => {
    **return getToken().then((res) => {
      console.log('gettoken done');
      config = config ? config : {};
      config.params = config.params ? config.params : {};
      timestamp = res.data.data.timestamp;
      headtoken = res.data.data.headtoken;
      sign = bulidSign(config.params, res.data.timestamp, config.url, res.data.signtoken);
      config.headers = {
        timestamp: timestamp,
        headtoken: headtoken,
        sign: sign
      };
      return config;**
    }).catch((res) => {
      console.log(res);
    });
}, error => {
  Message.error({
    message: '加载超时'
  });
  return Promise.reject(error)
});

export default axios
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值