真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

大家好，由于公司忙著趕項目，導(dǎo)致有段時間沒有發(fā)布新文章了。今天我想跟大家談?wù)凜ookie的使用。同樣，這個Cookie的使用方法是我從公司的項目中抽出來的，為了能讓大家看懂，我會盡量寫詳細點。廢話少說，我們直接進入正題。

海珠網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),海珠網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為海珠成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的海珠做網(wǎng)站的公司定做！

一、安裝Cookie

在Vue2.0下，這個貌似已經(jīng)不需要安裝了。因為當(dāng)你創(chuàng)建一個項目的時候，npm install 已經(jīng)為我們安裝好了。我的安裝方式如下：

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install

這是我創(chuàng)建好的目錄結(jié)構(gòu)，大家可以看一下：

在Vue中如何使用Cookie操作實例
項目結(jié)構(gòu)

二、封裝Cookie方法

在util文件夾下，我們創(chuàng)建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;
}

//設(shè)置cookie,增加到vue實例方便全局調(diào)用
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傳到后臺

關(guān)于這點，我需要說明一下，我們這里使用的是axios進行HTTP傳輸數(shù)據(jù)，為了更好的使用axios,我們在util文件夾下創(chuàng)建http.js文件，然后封裝GET,POST等方法，代碼如下：

import axios from 'axios' //引用axios
import {getCookie} from './util' //引用剛才我們創(chuàng)建的util.js文件，并使用getCookie方法

// axios 配置
axios.defaults.timeout = 5000; 
axios.defaults.baseURL = 'http://localhost/pjm-shield-api/public/v1/'; //這是調(diào)用數(shù)據(jù)接口

// 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' //設(shè)置跨域頭部
    };
    if (token) {
      config.params = {'token': token} //后臺接收的參數(shù)，后面我們將說明后臺如何接收
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);


// http response 攔截器
axios.interceptors.response.use(
  response => {
//response.data.errCode是我接口返回的值，如果值為2，說明Cookie丟失，然后跳轉(zhuǎn)到登錄頁，這里根據(jù)大家自己的情況來設(shè)定
    if(response.data.errCode == 2) {
      router.push({
        path: '/login',
        query: {redirect: router.currentRoute.fullPath} //從哪個頁面跳轉(zhuǎn)
      })
    }
    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布局，對應(yīng)不熟悉Element-ui的朋友們，可以去惡補一下。后面我們將講解如何使用它進行布局。登錄組件的代碼如下：

五、在路由中驗證token存不存在，不存在的話會到登錄頁

在 router--index.js中設(shè)置路由，代碼如下：

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' //右側(cè)
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, //只有一個節(jié)點
  menuShow: true,
  iconCls: 'iconfont icon-home', //圖標(biāo)樣式
  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: '票據(jù)管理',
  menuShow: true,
  iconCls: 'iconfont icon-books',
  children: [
   {path: '/bill/list',  component: billlist,  name: '已開票據(jù)列表', menuShow: true, meta:{requireAuth: true }},
   {path: '/bill/info',  component: billinfo,  name: '票據(jù)詳細頁', menuShow: false, meta:{requireAuth: true }},
   {path: '/bill/add',  component: addbill,  name: '新建開票信息', menuShow: true, meta:{requireAuth: true }}

  ]
 },
 {
  path: '/',
  component: Home,
  name: '系統(tǒng)設(shè)置',
  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 }，這個配置，主要為下面的驗證做服務(wù)。

if(to.meta.requireAuth)，這段代碼意思就是說，如果requireAuth: true ,那就判斷用戶是否存在。

如果存在，就繼續(xù)執(zhí)行下面的操作，如果不存在，就刪除客戶端的Cookie,同時頁面跳轉(zhuǎn)到登錄頁，代碼如下。

//這個是請求頁面路由的時候會驗證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在項目中的使用，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。


網(wǎng)站題目：在Vue中如何使用Cookie操作實例
標(biāo)題鏈接：http://weahome.cn/article/psscii.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部