一：封装Cookie方法
在util文件夹下，咱们建立util.js文件，而后上代码vue
//设置cookie
export function setCookie (c_name, value, expire) {
var date = new Date()
date.setSeconds(date.getSeconds() + expire)
document.cookie = c_name + "=" + escape(value) + "; expires=" + date.toGMTString()
console.log(document.cookie)
};
//获取cookie
export function getCookie(c_name){
if (document.cookie.length>0){
let c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1){
c_start=c_start + c_name.length+1
let c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
};
/*删除cookie*/
export function delCookie(c_name) {
setCookie(c_name, "", -1)
};
2、在HTTP中把Cookie传到后台
关于这点，我须要说明一下，咱们这里使用的是axios进行HTTP传输数据，为了更好的使用axios,咱们在util文件夹下建立http.js文件，而后封装GET,POST等方法，代码以下：ios
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);
})
})
}
3、在登陆组件使用Cookie
因为登陆组件我用的是Element-ui布局，对应不熟悉Element-ui的朋友们，能够去恶补一下。后面咱们将讲解如何使用它进行布局。登陆组件的代码以下：vue-router
<template>
<el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
class="demo-ruleForm login-container">
<h3 class="title">后台管理系统</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 style="width:100%;">
<el-button type="primary" style="width:100%" @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>
4、在路由中验证token存不存在，不存在的话会到登陆页
在 router/index.js中设置路由，代码以下：axios
import Vue from 'vue'
import Router from 'vue-router'
import {post,fetch,patch,put} from '@/util/http'
import {delCookie,getCookie} from '@/util/util'
Vue.use(Router);
const router= new Router({
mode: 'history',
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/user',
name: 'User',
component: User,
meta:{
title:'用户信息',
requireAuth: true
}
},
]
});
//这个是请求页面路由的时候会验证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
备注：请注意路由中的 meta:{requireAuth: true }，这个配置，主要为下面的验证作服务。api
if(to.meta.requireAuth)，这段代码意思就是说，若是requireAuth: true ,那就判断用户是否存在。跨域
若是存在，就继续执行下面的操做，若是不存在，就删除客户端的Cookie,同时页面跳转到登陆页。cookie
以上就是Cookie在项目中的使用，但愿对你们的学习有所帮助，也但愿你们多多支持session