大家好，由于公司忙着赶项目，导致有段时间没有发布新文章了。今天我想跟大家谈谈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' //设置跨域头部 }; 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((resolve, 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的朋友们，可以去恶补一下。后面我们将讲解如何使用它进行布局。登录组件的代码如下：
<template> <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"> <h3>后台管理系统</h3> <el-form-item prop="u_telephone"> <el-input type="text" v-model="account.u_telephone" auto-complete="off" placeholder="请输入账号"></el-input> </el-form-item> <el-form-item prod="u_password"> <el-input type="password" v-model="account.u_password" auto-complete="off" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleLogin" :loading="logining">登录</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { logining: false, account: { u_telephone:'', u_password:'' }, //表单验证规则 rules: { u_telephone: [ {required: true, message:'请输入账号',trigger: 'blur'} ], u_password: [ {required: true,message:'请输入密码',trigger: 'blur'} ] } } }, mounted() { //初始化 }, methods: { handleLogin() { this.$refs.AccountFrom.validate((valid) => { if(valid) { this.logining = true; //其中 'm/login' 为调用的接口，this.account为参数 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); //设置Session this.setCookie('u_uuid',res.errData.u_uuid,expireDays); //设置用户编号 if(this.$route.query.redirect) { this.$router.push(this.$route.query.redirect); } else { this.$router.push('/home'); //跳转用户中心页 } } }); } else { console.log('error submit'); return false; } }); } } } </script>
五、在路由中验证token存不存在，不存在的话会到登录页
在 router--index.js中设置路由，代码如下：