在Vue中如何使用Cookie操作实例


Posted in Javascript onJuly 27, 2017

大家好,由于公司忙着赶项目,导致有段时间没有发布新文章了。今天我想跟大家谈谈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

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

在Vue中如何使用Cookie操作实例
项目结构

二、封装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"
      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>

五、在路由中验证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;

以上就是Cookie在项目中的使用,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
javascript的数组和常用函数详解
May 09 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 #Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 #Javascript
Vue中如何实现轮播图的示例代码
Jul 27 #Javascript
基于构造函数的五种继承方法小结
Jul 27 #Javascript
vue中各组件之间传递数据的方法示例
Jul 27 #Javascript
微信小程序 页面跳转传值实现代码
Jul 27 #Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 #Javascript
You might like
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Javascript this 的一些学习总结
2012/08/02 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
angularJS开发注意事项
2018/05/26 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
js实现左右轮播图
2020/01/09 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
django定期执行任务(实例讲解)
2017/11/03 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python将list转为matrix的方法
2018/12/12 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
2015年元旦促销方案书
2014/12/09 职场文书