大家好，由於公司忙著趕專案，導致有段時間沒有釋出新文章了。今天我想跟大家談談Cookie的使用。同樣，這個Cookie的使用方法是我從公司的專案中抽出來的，為了能讓大家看懂，我會盡量寫詳細點，如果有不明白的盆友，可以加我們的QQ號，我們會遠端指導。我們的QQ號：【511387930】。廢話少說，我們直接進入正題。

一、安裝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在專案中的使用，歡迎大牛拍磚。(^o^)/~
為了更好的服務大家，請加入我們的技術交流群：（511387930），同時您也可以掃描下方的二維碼關注我們的公眾號，每天我們都會分享經驗，謝謝大家。