一：封裝Cookie方法
在util文件夾下，咱們建立util.js文件，而後上代碼javascript
//設置cookie export function setCookie (c_name, value, expire) { var date = new Date() date.setSeconds(date.getSeconds() + expire) document.cookie = c_name + "=" + escape(value) + "; expires=" + date.toGMTString() console.log(document.cookie) }; //獲取cookie export function getCookie(c_name){ if (document.cookie.length>0){ let c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1){ c_start=c_start + c_name.length+1 let c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" }; /*刪除cookie*/ export function delCookie(c_name) { setCookie(c_name, "", -1) };
2、在HTTP中把Cookie傳到後臺
關於這點，我須要說明一下，咱們這裏使用的是axios進行HTTP傳輸數據，爲了更好的使用axios,咱們在util文件夾下建立http.js文件，而後封裝GET,POST等方法，代碼以下：vue
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); }) }) }
3、在登陸組件使用Cookie
因爲登陸組件我用的是Element-ui佈局，對應不熟悉Element-ui的朋友們，能夠去惡補一下。後面咱們將講解如何使用它進行佈局。登陸組件的代碼以下：java
<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>
4、在路由中驗證token存不存在，不存在的話會到登陸頁
在 router/index.js中設置路由，代碼以下：ios
import Vue from 'vue' import Router from 'vue-router' import {post,fetch,patch,put} from '@/util/http' import {delCookie,getCookie} from '@/util/util' Vue.use(Router); const router= new Router({ mode: 'history', routes: [ { path: '/', redirect: '/home' }, { path: '/user', name: 'User', component: User, meta:{ title:'用戶信息', requireAuth: true } }, ] }); //這個是請求頁面路由的時候會驗證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
備註：請注意路由中的 meta:{requireAuth: true }，這個配置，主要爲下面的驗證作服務。vue-router
if(to.meta.requireAuth)，這段代碼意思就是說，若是requireAuth: true ,那就判斷用戶是否存在。typescript
若是存在，就繼續執行下面的操做，若是不存在，就刪除客戶端的Cookie,同時頁面跳轉到登陸頁。axios