在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 = {
      '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在项目中的使用，希望对大家的学习有所帮助，也希望大家多多支持。

# Vue使用Cookie  # vue  # cookie  # vue中使用cookie  # vue3中cookie的详细使用过程  # VUE前端cookie简单操作  # 前端Vue设置cookie、删除cookie  # 获取cookie方式  # 不存在  # 请输入  # 的是  # 跳转  # 个人信息  # 首页  # 创建一个  # 用户列表  # 跳转到  # 自己的  # 修改密码  # 这是  # 好了  # 我会  # 拦截器  # 那就  # 不需要  # 管理系统  # 当你  # 这段 

相关文章： 香港服务器租用每月最低只需15元？    ,巨量百应是干嘛的？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  常州企业网站制作公司,全国继续教育网怎么登录？  C++用Dijkstra(迪杰斯特拉)算法求最短路径  如何在腾讯云服务器上快速搭建个人网站？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  宠物网站制作html代码,有没有专门介绍宠物如何养的网站啊？  制作旅游网站html,怎样注册旅游网站？  如何获取免费开源的自助建站系统源码？  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  婚礼视频制作网站,学习*后期制作的网站有哪些？  如何在景安云服务器上绑定域名并配置虚拟主机？  建站VPS推荐：2025年高性能服务器配置指南  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  如何注册花生壳免费域名并搭建个人网站？  网站制作知乎推荐,想做自己的网站用什么工具比较好？  兔展官网 在线制作,怎样制作微信请帖？  建站之星代理商如何保障技术支持与售后服务？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  建站之星安装后如何自定义网站颜色与字体？  建站之星微信建站一键生成小程序+多端营销系统  网站制作的方法有哪些,如何将自己制作的网站发布到网上？  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  nginx修改上传文件大小限制的方法  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  如何在IIS服务器上快速部署高效网站？  建站主机服务器选型指南与性能优化方案解析  建站之星各版本价格是多少？  教学网站制作软件,学习*后期制作的网站有哪些？  浅析上传头像示例及其注意事项  如何通过智能用户系统一键生成高效建站方案？  网站制作企业,网站的banner和导航栏是指什么？  Swift开发中switch语句值绑定模式  魔方云NAT建站如何实现端口转发？  网页设计与网站制作内容,怎样注册网站？  如何在宝塔面板中创建新站点？  建站之星如何通过成品分离优化网站效率？  如何安全更换建站之星模板并保留数据？  香港服务器租用费用高吗？如何避免常见误区？  官网网站制作腾讯审核要多久,联想路由器newifi官网  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  黑客如何利用漏洞与弱口令入侵网站服务器？  如何用花生壳三步快速搭建专属网站？  建站之星在线客服如何快速接入解答？