vue怎么让接口带上cookie_在Vue中如何使用Cookie操作实例

大家好，由于公司忙着赶项目，导致有段时间没有发布新文章了。今天我想跟大家谈谈Cookie的使用。同样，这个Cookie的使用方法是我从公司的项目中抽出来的，为了能让大家看懂，我会尽量写详细点。废话少说，我们直接进入正题。

一、安装Cookie

在Vue2.0下，这个貌似已经不需要安装了。因为当你创建一个项目的时候，npm install 已经为我们安装好了。我的安装方式如下：

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm install

这是我创建好的目录结构，大家可以看一下：

项目结构

二、封装Cookie方法

在util文件夹下，我们创建util.js文件，然后上代码

//获取cookie、

export function getCookie(name) {

var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

if (arr = document.cookie.match(reg))

return (arr[2]);

else

return null;

}

//设置cookie,增加到vue实例方便全局调用

export function setCookie (c_name, value, expiredays) {

var exdate = new Date();

exdate.setDate(exdate.getDate() + expiredays);

document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());

};

//删除cookie

export function delCookie (name) {

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = getCookie(name);

if (cval != null)

document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

};

三、在HTTP中把Cookie传到后台

关于这点，我需要说明一下，我们这里使用的是axios进行HTTP传输数据，为了更好的使用axios,我们在util文件夹下创建http.js文件，然后封装GET,POST等方法，代码如下：

import axios from 'axios' //引用axios

import {getCookie} from './util' //引用刚才我们创建的util.js文件，并使用getCookie方法

// axios 配置

axios.defaults.timeout = 5000;

axios.defaults.baseURL = 'http://localhost/pjm-shield-api/public/v1/'; //这是调用数据接口

// http request 拦截器，通过这个，我们就可以把Cookie传到后台

axios.interceptors.request.use(

config => {

const token = getCookie('session'); //获取Cookie

config.data = JSON.stringify(config.data);

config.headers = {

'Content-Type':'application/x-www-form-urlencoded' //设置跨域头部

}