• 欢迎访问全栈之路
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

前后端分离Vue下-通过Header传递token以及加密所有参数等

Vue Torry.Yao 303次浏览

一、设置请求头Header
通过JWT实现认证流程
20180801140518309
Vue store中存储该token,项目初始化后拿到该token,放入axios请求的Header中。

if(store.getters.token){
    axios.defaults.headers.common['Authorization'] = "Bearer " + store.getters.token;
}

如果不存在该token的,则跳转到登录页面,登录成功后,取到token,写入到store中,然后设置请求头。

二、加密所有参数生成sign。
为了接口请求安全,做接口设计的时候增加了一个sign字段。生成规则如下,所有请求参数按字母顺序排序,然后加上后端配置的私钥secret,生成的字符串进行md5加密,发到后台做比对。
这里我们最笨的方法就是写个生成函数,把所有参数及值传进去,返回sign。
但是每个方法都调用一次也很头疼。
这里我们用Axios的拦截器实现一下。在请求发送之前进行拦截,拿到所有字段后进行排序,按照规则生成对应的sign,然后添加到请求字段里即可。

示例代码

axios.interceptors.request.use( config => {
   if(config.data){
     let sign = Vue.prototype.getSign(config.data);
     config.data+="&sign="+sign
   }
   return config;
}, (error) => {
  // Do something with request error
  return Promise.reject(error);
});

Vue.prototype.getSign就是写的生成sign的方法。


全栈之路 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明前后端分离Vue下-通过Header传递token以及加密所有参数等
喜欢 (3)