在 vue-cli 项目中关于请求参数加密和响应数据解密，添加请求头信息方法的总结

基于 Base64 的加密解密

• 安装依赖

npm install --save js-base64

• 在 main.js 中引入

let Base64 = require("js-base64").Base64;

• 使用
  在 main.js 中通过把方法挂载到 vue 原型对象 prototype 上，其中参数以对象的形式进行传输，加密两次，解密一次。

// 加密
Vue.prototype.$encryption = function (ainfo) {
    let data = Base64.encode(JSON.stringify(ainfo));
    data = Base64.encode(data);
    return data;
}

// 解密
Vue.prototype.$decryption = function (aresdata) {
    var resData = Base64.decode(aresdata);
    try {
        resData = JSON.parse(resData);
    } catch (e) {
        resData = eval("(" + resData + ")");
    }
    return resData
}

添加请求头信息

页面发送 http 请求，很多情况我们要对请求和其响应进行特定的处理；例如每个请求都附带后端返回的 token，拿到 response 之前 loading 动画的展示等。如果请求数非常多，这样处理起来会非常的麻烦，程序的优雅性也会大打折扣。在这种情况下，axios 为开发者提供了这样一个API：拦截器。拦截器分为 请求（request）拦截器和 响应（response）拦截器。

了解：
这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候，会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，服务器就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过，再进行相关的操作。
若是需要跨站点，token 存放到 cookie 会好一点,限制也没那么多,有些浏览环境限制了 localstorage (隐身模式)的使用。

axios 是一款基于 promise 封装的库，可以运行在浏览器端和 node 环境中。它有很多优秀的特性，例如拦截请求和响应、取消请求、转换 json、客户端防御 XSRF 等。所以vue官方开发组放弃了对其官方库 vue-resource 的维护，直接推荐我们使用 axios 库。axios官方中文文档


版权声明：此段内容参考，原文链接：https://www.jianshu.com/p/646ed4edf51f

• 方法一：在 main.js 中定义全局配置

import axios from 'axios'

axios.defaults.baseURL = '/ip'    // 配置请求的根路径
axios.defaults.headers.post['Contenst-Type'] = 'application/json;charset=UTF-8'
axios.defaults.headers.common['token'] = getCookie('audToken');  // 添加token身份验证

Vue.config.productionTip = false
Vue.prototype.$ajax = axios

// 附：获取 token 信息的自定义方法，根据自己项目依具体情况而定
function getCookie(cname) {
    var name = cname + "=";
    // document.cookie 获取并设置与当前文档相关联的 cookie, 
    // 每条cookie以"分号和空格(; )"分隔(即, key=value 键值对)。

    // decodeURIComponent() 方法用于解码由 encodeURIComponent 方法或者
    // 其它类似方法编码的部分统一资源标识符（URI）。

    // charAt() 方法从一个字符串中返回指定的字符, 参数是 index 值

    // substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集

    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(";");
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == " ") {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

• 方法二：在 main.js 中通过 axios 请求拦截

// axios 请求拦截
axios.interceptors.request.use(config => {   
    // NProgress.start()   // 页面加载进度条效果开始
    config.headers["Content-Type"] = "application/json;charset=UTF-8"
    config.headers["token"] = getCookie('audToken')
    // 加自己的业务逻辑
    return config
})
// axios 响应拦截
axios.interceptors.response.use(config => {
	// NProgress.done()    // 页面加载进度条效果结束
	// 加自己的业务逻辑
    return config
})

• 方法三：在相应组件发送请求时直接添加

此方法，如果也同时设置了相同的全局的请求头信息，以此为准

// 例
const { data: res } = await this.$axios.post(
        "/audreport/export/selectHuoNumberByTime",
        data,
        {
        	headers: {
        		"token": this.$token,
        		"Content-Type": "application/json;charset=UTF-8"
        	}
        }
);

// 其中 this.$token 为在 main.js 中自定义的
Vue.prototype.$token = getCookie("audToken");

备注：在项目中会涉及到如果没有登录信息，则不能跳转至别的页面，只在当前登录页面的登录拦截

// 在 router.js 中挂载路由导航守卫
router.beforeEach((to, form, next) => {
  if (to.path == '/login') return next()
  let tokenStr = window.sessionStorage.getItem('token')
  // 通过判断客户端是否存储了登录信息，判断登录状态
  if (!tokenStr) return next('/login')
  // 表示已登录
  next()
})