vue 中的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中把饼干传到后台

关于这点，我需要说明一下，我们这里使用的是Axios公司进行HTTP传输数据，为了更好的使用Axios公司，我们在util的文件夹下创建http.js文件，然后封装GET，POST等方法，代码如下：

四，在登录组件使用的Cookie

登由于录组件我用的的英文元素的UI布局，对应不熟悉元素的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>

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

在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;