vue 封裝cookie,請求，登陸攔截，接口攔截

時間 2019-11-10

原文原文鏈接

一：封裝Cookie方法
在util文件夾下，咱們建立util.js文件，而後上代碼vue

//設置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等方法，代碼以下：ios

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的朋友們，能夠去惡補一下。後面咱們將講解如何使用它進行佈局。登陸組件的代碼以下：vue-router

<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中設置路由，代碼以下：axios

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 }，這個配置，主要爲下面的驗證作服務。api

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

若是存在，就繼續執行下面的操做，若是不存在，就刪除客戶端的Cookie,同時頁面跳轉到登陸頁。cookie

以上就是Cookie在項目中的使用，但願對你們的學習有所幫助，也但願你們多多支持session