大家好，由于公司忙著趕項(xiàng)目，導(dǎo)致有段時(shí)間沒(méi)有發(fā)布新文章了。今天我想跟大家談?wù)凜ookie的使用。同樣，這個(gè)Cookie的使用方法是我從公司的項(xiàng)目中抽出來(lái)的，為了能讓大家看懂，我會(huì)盡量寫(xiě)詳細(xì)點(diǎn)。廢話少說(shuō)，我們直接進(jìn)入正題。

一、安裝Cookie

在Vue2.0下，這個(gè)貌似已經(jīng)不需要安裝了。因?yàn)楫?dāng)你創(chuàng)建一個(gè)項(xiàng)目的時(shí)候，npm install 已經(jīng)為我們安裝好了。我的安裝方式如下：

# 全局安裝 vue-cli

$ npm install --global vue-cli

# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目

$ vue init webpack my-project

# 安裝依賴，走你

$ cd my-project

$ npm install

這是我創(chuàng)建好的目錄結(jié)構(gòu)，大家可以看一下：

項(xiàng)目結(jié)構(gòu)

二、封裝Cookie方法

在util文件夾下，我們創(chuàng)建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;

}

//設(shè)置cookie,增加到vue實(shí)例方便全局調(diào)用

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傳到后臺(tái)

關(guān)于這點(diǎn)，我需要說(shuō)明一下，我們這里使用的是axios進(jìn)行HTTP傳輸數(shù)據(jù)，為了更好的使用axios,我們?cè)趗til文件夾下創(chuàng)建http.js文件，然后封裝GET,POST等方法，代碼如下：

import axios from 'axios' //引用axios

import {getCookie} from './util' //引用剛才我們創(chuàng)建的util.js文件，并使用getCookie方法

// axios 配置

axios.defaults.timeout = 5000;

axios.defaults.baseURL = 'http://localhost/pjm-shield-api/public/v1/'; //這是調(diào)用數(shù)據(jù)接口

// http request 攔截器，通過(guò)這個(gè)，我們就可以把Cookie傳到后臺(tái)

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' //設(shè)置跨域頭部

};

if (token) {

config.params = {'token': token} //后臺(tái)接收的參數(shù)，后面我們將說(shuō)明后臺(tái)如何接收

}

return config;

},

err => {

return Promise.reject(err);

}

);

// http response 攔截器

axios.interceptors.response.use(

response => {

//response.data.errCode是我接口返回的值，如果值為2，說(shuō)明Cookie丟失，然后跳轉(zhuǎn)到登錄頁(yè)，這里根據(jù)大家自己的情況來(lái)設(shè)定

if(response.data.errCode == 2) {

router.push({

path: '/login',

query: {redirect: router.currentRoute.fullPath} //從哪個(gè)頁(yè)面跳轉(zhuǎn)

})

}

return response;

},

error => {

return Promise.reject(error.response.data)

});

export default axios;

/**

* fetch 請(qǐng)求方法

* @param url

* @param params

* @returns {Promise}

*/

export function fetch(url, params = {}) {

return new Promise((resolve, reject) => {

axios.get(url, {

params: params

})

.then(response => {

resolve(response.data);

})

.catch(err => {

reject(err)

})

})

}

/**

* post 請(qǐng)求方法

* @param url

* @param data

* @returns {Promise}

*/

export function post(url, data = {}) {

return new Promise((resolve, reject) => {

axios.post(url, data)

.then(response => {

resolve(response.data);

}, err => {

reject(err);

})

})

}

/**

* patch 方法封裝

* @param url

* @param data

* @returns {Promise}

*/

export function patch(url, data = {}) {

return new Promise((resolve, reject) => {

axios.patch(url, data)

.then(response => {

resolve(response.data);

}, err => {

reject(err);

})

})

}

/**

* put 方法封裝

* @param url

* @param data

* @returns {Promise}

*/

export function put(url, data = {}) {

return new Promise((resolve, reject) => {

axios.put(url, data)

.then(response => {

resolve(response.data);

}, err => {

reject(err);

})

})

}

四、在登錄組件使用Cookie

由于登錄組件我用的是Element-ui布局，對(duì)應(yīng)不熟悉Element-ui的朋友們，可以去惡補(bǔ)一下。后面我們將講解如何使用它進(jìn)行布局。登錄組件的代碼如下：

class="demo-ruleForm login-container">

后臺(tái)管理系統(tǒng)

登錄

export default {

data() {

return {

logining: false,

account: {

u_telephone:'',

u_password:''

},

//表單驗(yàn)證規(guī)則

rules: {

u_telephone: [

{required: true, message:'請(qǐng)輸入賬號(hào)',trigger: 'blur'}

],

u_password: [

{required: true,message:'請(qǐng)輸入密碼',trigger: 'blur'}

]

}

}

},

mounted() {

//初始化

},

methods: {

handleLogin() {

this.$refs.AccountFrom.validate((valid) => {

if(valid) {

this.logining = true;

//其中 'm/login' 為調(diào)用的接口，this.account為參數(shù)

this.$post('m/login',this.account).then(res => {

this.logining = false;

if(res.errCode !== 200) {

this.$message({

message: res.errMsg,

type:'error'

});

} else {

let expireDays = 1000 * 60 * 60 ;

this.setCookie('session',res.errData.token,expireDays); //設(shè)置Session

this.setCookie('u_uuid',res.errData.u_uuid,expireDays); //設(shè)置用戶編號(hào)

if(this.$route.query.redirect) {

this.$router.push(this.$route.query.redirect);

} else {

this.$router.push('/home'); //跳轉(zhuǎn)用戶中心頁(yè)

}

}

});

} else {

console.log('error submit');

return false;

}

});

}

}

}

五、在路由中驗(yàn)證token存不存在，不存在的話會(huì)到登錄頁(yè)

在 router--index.js中設(shè)置路由，代碼如下：

import Vue from 'vue'

import Router from 'vue-router'

import {post,fetch,patch,put} from '@/util/http'

import {delCookie,getCookie} from '@/util/util'

import Index from '@/views/index/Index' //首頁(yè)

import Home from '@/views/index/Home' //主頁(yè)

import right from '@/components/UserRight' //右側(cè)

import userlist from '@/views/user/UserList' //用戶列表

import usercert from '@/views/user/Certification' //用戶審核

import userlook from '@/views/user/UserLook' //用戶查看

import usercertlook from '@/views/user/UserCertLook' //用戶審核查看

import sellbill from '@/views/ticket/SellBill'

import buybill from '@/views/ticket/BuyBill'

import changebill from '@/views/ticket/ChangeBill'

import billlist from '@/views/bill/list'

import billinfo from '@/views/bill/info'

import addbill from '@/views/bill/add'

import editsellbill from '@/views/ticket/EditSellBill'

import ticketstatus from '@/views/ticket/TicketStatus'

import addticket from '@/views/ticket/AddTicket'

import userinfo from '@/views/user/UserInfo' //個(gè)人信息

import editpwd from '@/views/user/EditPwd' //修改密碼

Vue.use(Router);

const routes = [

{

path: '/',

name:'登錄',

component:Index

},

{

path: '/',

name: 'home',

component: Home,

redirect: '/home',

leaf: true, //只有一個(gè)節(jié)點(diǎn)

menuShow: true,

iconCls: 'iconfont icon-home', //圖標(biāo)樣式

children: [

{path:'/home', component: right, name: '首頁(yè)', menuShow: true, meta:{requireAuth: true }}

]

},

{

path: '/',

component: Home,

name: '用戶管理',

menuShow: true,

iconCls: 'iconfont icon-users',

children: [

{path: '/userlist', component: userlist, name: '用戶列表', menuShow: true, meta:{requireAuth: true }},

{path: '/usercert', component: usercert, name: '用戶認(rèn)證審核', menuShow: true, meta:{requireAuth: true }},

{path: '/userlook', component: userlook, name: '查看用戶信息', menuShow: false,meta:{requireAuth: true}},

{path: '/usercertlook', component: usercertlook, name: '用戶審核信息', menuShow: false,meta:{requireAuth: true}},

]

},

{

path: '/',

component: Home,

name: '信息管理',

menuShow: true,

iconCls: 'iconfont icon-books',

children: [

{path: '/sellbill', component: sellbill, name: '賣票信息', menuShow: true, meta:{requireAuth: true }},

{path: '/buybill', component: buybill, name: '買票信息', menuShow: true, meta:{requireAuth: true }},

{path: '/changebill', component: changebill, name: '換票信息', menuShow: true, meta:{requireAuth: true }},

{path: '/bill/editsellbill', component: editsellbill, name: '編輯賣票信息', menuShow: false, meta:{requireAuth: true}}

]

},

{

path: '/bill',

component: Home,

name: '票據(jù)管理',

menuShow: true,

iconCls: 'iconfont icon-books',

children: [

{path: '/bill/list', component: billlist, name: '已開(kāi)票據(jù)列表', menuShow: true, meta:{requireAuth: true }},

{path: '/bill/info', component: billinfo, name: '票據(jù)詳細(xì)頁(yè)', menuShow: false, meta:{requireAuth: true }},

{path: '/bill/add', component: addbill, name: '新建開(kāi)票信息', menuShow: true, meta:{requireAuth: true }}

]

},

{

path: '/',

component: Home,

name: '系統(tǒng)設(shè)置',

menuShow: true,

iconCls: 'iconfont icon-setting1',

children: [

{path: '/userinfo', component: userinfo, name: '個(gè)人信息', menuShow: true, meta:{requireAuth: true }},

{path: '/editpwd', component: editpwd, name: '修改密碼', menuShow: true, meta:{requireAuth: true }}

]

}

];

const router = new Router({

routes

});

備注：請(qǐng)注意路由中的 meta:{requireAuth: true }，這個(gè)配置，主要為下面的驗(yàn)證做服務(wù)。

if(to.meta.requireAuth)，這段代碼意思就是說(shuō)，如果requireAuth: true ,那就判斷用戶是否存在。

如果存在，就繼續(xù)執(zhí)行下面的操作，如果不存在，就刪除客戶端的Cookie,同時(shí)頁(yè)面跳轉(zhuǎn)到登錄頁(yè)，代碼如下。

//這個(gè)是請(qǐng)求頁(yè)面路由的時(shí)候會(huì)驗(yàn)證token存不存在，不存在的話會(huì)到登錄頁(yè)

router.beforeEach((to, from, next) => {

if(to.meta.requireAuth) {

fetch('m/is/login').then(res => {

if(res.errCode == 200) {

next();

} else {

if(getCookie('session')) {

delCookie('session');

}

if(getCookie('u_uuid')) {

delCookie('u_uuid');

}

next({

path: '/'

});

}

});

} else {

next();

}

});

export default router;

以上就是Cookie在項(xiàng)目中的使用，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue怎么让接口带上cookie_在Vue中如何使用Cookie操作实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。