在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 = {

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

};

if (token) {

config.params = {'token': token} //后台接收的参数，后面我们将说明后台如何接收

}

return config;

},

err => {

return Promise.reject(err);

}

);

// http response 拦截器

axios.interceptors.response.use(

response => {

//response.data.errCode是我接口返回的值，如果值为2，说明Cookie丢失，然后跳转到登录页，这里根据大家自己的情况来设定

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

router.push({

path: '/login',

query: {redirect: router.currentRoute.fullPath} //从哪个页面跳转

})

}

return response;

},

error => {

return Promise.reject(error.response.data)

});

export default axios;

/**

* fetch 请求方法

* @param url

* @param params

* @returns {Promise}

*/

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

return new Promise((reshttp://olve, reject) => {

axios.get(url, {

params: params

})

.then(response => {

resolve(response.data);

})

.catch(err => {

reject(err)

})

})

}

/**

* post 请求方法

* @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布局，对应不熟悉Element-ui的朋友们，可以去恶补一下。后面我们将讲解如何使用它进行布局。登录组件的代码如下：

class="demo-ruleForm login-container">

后台管理系统

class="demo-ruleForm login-container">

登录

五、在路由中验证token存不存在，不存在的话会到登录页

在 router--index.js中设置路由，代码如下：

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' //首页

import Home from '@/views/index/Home' //主页

import right from '@/components/UserRight' //右侧

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' //个人信息

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

Vue.use(Router);

const routes = [

{

path: '/',

name:'登录',

component:Index

},

{

path: '/',

name: 'home',

component: Home,

redirect: '/home',

leaf: true, //只有一个节点

menuShow: true,

iconCls: 'iconfont icon-home', //图标样式

children: [

{path:'/home', component: right, name: '首页', 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: '用户认证审核', 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: '票据管理',

menuShow: true,

iconCls: 'iconfont icon-books',

children: [

{path: '/bill/list', component: billlist, name: '已开票据列表', menuShow: true, meta:{requireAuth: true }},

{path: '/bill/info', component: billinfo, name: '票据详细页', menuShow: false, meta:{requireAuth: true }},

{path: '/bill/add', component: addbill, name: '新建开票信息', menuShow: true, meta:{requireAuth: true }}

]

},

{

path: '/',

component: Home,

name: '系统设置',

menuShow: true,

iconCls: 'iconfont icon-setting1',

children: [

{path: '/userinfo', component: userinfo, name: '个人信息', menuShow: true, meta:{requireAuth: true }},

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

]

}

];

const router = new Router({

routes

});

备注：请注意路由中的 meta:{requireAuth: true }，这个配置，主要为下面的验证做服务。

if(to.meta.requireAuth)，这段代码意思就是说，如果requireAuth: true ,那就判断用户是否存在。

如果存在，就继续执行下面的操作，如果不存在，就删除客户端的Cookie,同时页面跳转到登录页，代码如下。

//这个是请求页面路由的时候会验证token存不存在，不存在的话会到登录页

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;

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。