您好,登錄后才能下訂單哦!
大家好,由于公司忙著趕項(xiàng)目,導(dǎo)致有段時(shí)間沒(méi)有發(fā)布新文章了。今天我想跟大家談?wù)凜ookie的使用。同樣,這個(gè)Cookie的使用方法是我從公司的項(xiàng)目中抽出來(lái)的,為了能讓大家看懂,我會(huì)盡量寫(xiě)詳細(xì)點(diǎn)。廢話少說(shuō),我們直接進(jìn)入正題。
一、安裝Cookie
在Vue2.0下,這個(gè)貌似已經(jīng)不需要安裝了。因?yàn)楫?dāng)你創(chuàng)建一個(gè)項(xiàng)目的時(shí)候,npm install 已經(jīng)為我們安裝好了。我的安裝方式如下:
# 全局安裝 vue-cli $ npm install --global vue-cli # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目 $ vue init webpack my-project # 安裝依賴(lài),走你 $ cd my-project $ npm install
這是我創(chuàng)建好的目錄結(jié)構(gòu),大家可以看一下:
項(xiàng)目結(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實(shí)例方便全局調(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傳到后臺(tái)
關(guān)于這點(diǎn),我需要說(shuō)明一下,我們這里使用的是axios進(jìn)行HTTP傳輸數(shù)據(jù),為了更好的使用axios,我們?cè)趗til文件夾下創(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 攔截器,通過(guò)這個(gè),我們就可以把Cookie傳到后臺(tái) 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} //后臺(tái)接收的參數(shù),后面我們將說(shuō)明后臺(tái)如何接收 } return config; }, err => { return Promise.reject(err); } ); // http response 攔截器 axios.interceptors.response.use( response => { //response.data.errCode是我接口返回的值,如果值為2,說(shuō)明Cookie丟失,然后跳轉(zhuǎn)到登錄頁(yè),這里根據(jù)大家自己的情況來(lái)設(shè)定 if(response.data.errCode == 2) { router.push({ path: '/login', query: {redirect: router.currentRoute.fullPath} //從哪個(gè)頁(yè)面跳轉(zhuǎn) }) } return response; }, error => { return Promise.reject(error.response.data) }); export default axios; /** * fetch 請(qǐng)求方法 * @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 請(qǐng)求方法 * @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布局,對(duì)應(yīng)不熟悉Element-ui的朋友們,可以去惡補(bǔ)一下。后面我們將講解如何使用它進(jìn)行布局。登錄組件的代碼如下:
<template> <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px" class="demo-ruleForm login-container"> <h4 class="title">后臺(tái)管理系統(tǒng)</h4> <el-form-item prop="u_telephone"> <el-input type="text" v-model="account.u_telephone" auto-complete="off" placeholder="請(qǐng)輸入賬號(hào)"></el-input> </el-form-item> <el-form-item prod="u_password"> <el-input type="password" v-model="account.u_password" auto-complete="off" placeholder="請(qǐng)輸入密碼"></el-input> </el-form-item> <el-form-item > <el-button type="primary" @click="handleLogin" :loading="logining">登錄</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { logining: false, account: { u_telephone:'', u_password:'' }, //表單驗(yàn)證規(guī)則 rules: { u_telephone: [ {required: true, message:'請(qǐng)輸入賬號(hào)',trigger: 'blur'} ], u_password: [ {required: true,message:'請(qǐng)輸入密碼',trigger: 'blur'} ] } } }, mounted() { //初始化 }, methods: { handleLogin() { this.$refs.AccountFrom.validate((valid) => { if(valid) { this.logining = true; //其中 'm/login' 為調(diào)用的接口,this.account為參數(shù) 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); //設(shè)置Session this.setCookie('u_uuid',res.errData.u_uuid,expireDays); //設(shè)置用戶(hù)編號(hào) if(this.$route.query.redirect) { this.$router.push(this.$route.query.redirect); } else { this.$router.push('/home'); //跳轉(zhuǎn)用戶(hù)中心頁(yè) } } }); } else { console.log('error submit'); return false; } }); } } } </script>
五、在路由中驗(yàn)證token存不存在,不存在的話會(huì)到登錄頁(yè)
在 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' //首頁(yè) import Home from '@/views/index/Home' //主頁(yè) import right from '@/components/UserRight' //右側(cè) import userlist from '@/views/user/UserList' //用戶(hù)列表 import usercert from '@/views/user/Certification' //用戶(hù)審核 import userlook from '@/views/user/UserLook' //用戶(hù)查看 import usercertlook from '@/views/user/UserCertLook' //用戶(hù)審核查看 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' //個(gè)人信息 import editpwd from '@/views/user/EditPwd' //修改密碼 Vue.use(Router); const routes = [ { path: '/', name:'登錄', component:Index }, { path: '/', name: 'home', component: Home, redirect: '/home', leaf: true, //只有一個(gè)節(jié)點(diǎn) menuShow: true, iconCls: 'iconfont icon-home', //圖標(biāo)樣式 children: [ {path:'/home', component: right, name: '首頁(yè)', menuShow: true, meta:{requireAuth: true }} ] }, { path: '/', component: Home, name: '用戶(hù)管理', menuShow: true, iconCls: 'iconfont icon-users', children: [ {path: '/userlist', component: userlist, name: '用戶(hù)列表', menuShow: true, meta:{requireAuth: true }}, {path: '/usercert', component: usercert, name: '用戶(hù)認(rèn)證審核', menuShow: true, meta:{requireAuth: true }}, {path: '/userlook', component: userlook, name: '查看用戶(hù)信息', menuShow: false,meta:{requireAuth: true}}, {path: '/usercertlook', component: usercertlook, name: '用戶(hù)審核信息', menuShow: false,meta:{requireAuth: true}}, ] }, { path: '/', component: Home, name: '信息管理', menuShow: true, iconCls: 'iconfont icon-books', children: [ {path: '/sellbill', component: sellbill, name: '賣(mài)票信息', menuShow: true, meta:{requireAuth: true }}, {path: '/buybill', component: buybill, name: '買(mǎi)票信息', menuShow: true, meta:{requireAuth: true }}, {path: '/changebill', component: changebill, name: '換票信息', menuShow: true, meta:{requireAuth: true }}, {path: '/bill/editsellbill', component: editsellbill, name: '編輯賣(mài)票信息', menuShow: false, meta:{requireAuth: true}} ] }, { path: '/bill', component: Home, name: '票據(jù)管理', menuShow: true, iconCls: 'iconfont icon-books', children: [ {path: '/bill/list', component: billlist, name: '已開(kāi)票據(jù)列表', menuShow: true, meta:{requireAuth: true }}, {path: '/bill/info', component: billinfo, name: '票據(jù)詳細(xì)頁(yè)', menuShow: false, meta:{requireAuth: true }}, {path: '/bill/add', component: addbill, name: '新建開(kāi)票信息', menuShow: true, meta:{requireAuth: true }} ] }, { path: '/', component: Home, name: '系統(tǒng)設(shè)置', menuShow: true, iconCls: 'iconfont icon-setting1', children: [ {path: '/userinfo', component: userinfo, name: '個(gè)人信息', menuShow: true, meta:{requireAuth: true }}, {path: '/editpwd', component: editpwd, name: '修改密碼', menuShow: true, meta:{requireAuth: true }} ] } ]; const router = new Router({ routes });
備注:請(qǐng)注意路由中的 meta:{requireAuth: true },這個(gè)配置,主要為下面的驗(yàn)證做服務(wù)。
if(to.meta.requireAuth),這段代碼意思就是說(shuō),如果requireAuth: true ,那就判斷用戶(hù)是否存在。
如果存在,就繼續(xù)執(zhí)行下面的操作,如果不存在,就刪除客戶(hù)端的Cookie,同時(shí)頁(yè)面跳轉(zhuǎn)到登錄頁(yè),代碼如下。
//這個(gè)是請(qǐng)求頁(yè)面路由的時(shí)候會(huì)驗(yàn)證token存不存在,不存在的話會(huì)到登錄頁(yè) 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在項(xiàng)目中的使用,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。