发送 cookie 凭证信息的axios请求 前端发送cookie

　　在正式介绍cookie之前我们要先来说一说网络通讯协议😉

　　首先：什么是网络通讯协议？所谓协议一般就是甲乙双方沟通要遵循的规则与方式，那么通讯协议就是通讯双方要遵循的规则，网络通讯协议则是客户端与服务器双方传输数据所要遵循的协议，一般是http或者https，而它们都是基于TCP/IP协议的

　　TCP/IP协议是面向连接的

　　　在发送数据之前，都必须先在双方之间建立一条连接。在TCP/IP协议中，TCP 协议提供可靠的连接服务，连接是通过三次握手进行初始化的，如下图：

　　　

　　客户端要向服务器发送请求，首先会发送一个请求连接，这是第一次握手，当服务器收到这个请求以后返回给客户端一条消息，这是第二次握手，然后客户端再把确认消息发给服务器，这是第三次握手，经过这三次握手客户端与服务器之间的连接就建立起来了。就像打电话一样，客户端向服务器拨通电话，服务器接起电话，说了一句：“喂？”，然后客户端收到了这句“喂”，再跟服务器说一声“喂！”，连接就建立好了，可以愉快的通话了😊

　　cookie

　　cookie称之为会话跟踪技术，顾名思义，就是在一次会话中跟踪记录一些状态。首先，所谓的”会话“指的就是从浏览器打开一个网站到访问它的其他网页直到浏览器关闭的这个过程。cookie就可以在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（例如：是否登录、购物车信息、是否已下载、是否 已点赞、视频播放进度等等）。

　　cookie的特点

只能存储文本 (如果浏览器可以随意在客户端机器上生成文件，比如身份牌是个定时炸弹，安全问题将会变得非常严重)

   单条存储有大小限制4KB左右（文件若没有大小限制，比如身份牌的重量是140斤，挂脖子能不能累死？但是现在很多浏览器能存储的大小不止4KB，可能还会多一点点）

   数量限制（一般浏览器，限制大概在50条左右，你家的门禁卡里能存的下一部蓝光高清么？）

   读取有域名限制：不可跨域读取，只能由来自 写入cookie的 同一域名 的网页可进行读取。简单的讲就是，存在那个域下的cookie，只有当前域有权利读取（身份牌是我的，当然只有我能读取，你媳妇儿的手机自动连接了邻居老王家的wifi，你知道这意味着什么吗？）

   时效限制：每个cookie都有时效，默认的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁，但是我们也可以在存储的时候手动设置cookie的过期时间（安全学基本理论：密码锁每次打开都需要重新输入密码，输入一次密码，以后就不再验证，就没有安全可言，问：信用卡为什么会有过期时间？）

   路径限制：存cookie时候可以指定路径，只允许子路径读取外层cookie，外层不能读取内层。一般cookie都存在项目的根目录，这样就可以避免这种问题。

 　　封装一个存储cookie的方法如下

/** 存一条cookie
 * @param {string} key 要存的cookie的名称
 * @param {string} value 要存的cookie的值
 * @param {object} [options] 可选参数，过期时间和目录，如：{ path: '/', expires: 7 }存根目录7天过期的cookie
 */
function setCookie (key, value, options) {
    var str = `${key}=${encodeURIComponent(value)}`
    // 先判断options是否传进来了
    if (options) {
        // 如果传进来了再判断有哪个属性
        if (options.path) {
            // 路径拼接进去
            str += `;path=${options.path}`
        }
        if (options.expires) {
            var date = new Date()
            // 日期设置为过期时间
            date.setDate(date.getDate() + options.expires)
            str += `;expires=${date.toUTCString()}`
        }
    }
    document.cookie = str
}

　　取cookie　　　

　　　　现在我们掌握了如何存cookie，接下来看看怎么取吧

　　　　取cookie同样使用document.cookie这个属性：

　　　　

/** 获取某一条cookie
 * @param {string} key 要获取的cookie的名称
 * @retrun {string} 当前这条cookie的值
 */
getCookie (key) {
    var str = document.cookie
    var arr = str.split('; ')
    var obj = new Object()
    arr.forEach(item => {
        var subArr = item.split('=')
        obj[subArr[0]] = decodeURIComponent(subArr[1])
    })
    return obj[key]
}

　　删除cookie

　　　　删除cookie的方式特别简单，我们只需要把cookie的过期时间设置为已经过去了的时间就行了，这个时候浏览器一看，诶？这条cookie不是已经过期了么？我是谁？😖我在哪？😖就只能把它删掉了🥺，方法如下：

/** 删一条cookie
 * @param {string} key 要删的cookie的名称
 * @param {path} [path] 可选参数，要删的cookie的所在的路径，如果就是当前路径这个参数可以不传
 */
function removeCookie (key, path) {
    var date = new Date()
    date.setDate(date.getDate() - 1) // 过期时间设置为昨天
    var str = `${key}='';expires=${date.toUTCString()}`
    if (path) {
        str += `;path=${path}`      
    }
    document.cookie = str
}

　　修改cookie

　　　　重新存一下把之前的覆盖掉就是修改了cookie了😎

// 通过判断有没有传第二个参数value来决定是存还是取
// 这个方法也可以用于删cookie，比如：cookie('username', '', { expires: -1, path: '/' })
function cookie (key, value, options) {
    if (value) {
        var str = `${key}=${encodeURIComponent(value)}`
        if (options) {
            if (options.path) {
                str += `;path=${options.path}`
            }
            if (options.expires) {
                var date = new Date()
                date.setDate(date.getDate() + options.expires)
                str += `;expires=${date.toUTCString()}`
            }
        }
        document.cookie = str
    } else {
        var str = document.cookie
        var arr = str.split('; ')
        var obj = new Object()
        arr.forEach(item => {
            var subArr = item.split('=')
            obj[subArr[0]] = decodeURIComponent(subArr[1])
        })
        return obj[key]
    }
}