vue 封装cookie,请求，登录拦截，接口拦截

作者:陈88

原文链接:https://segmentfault.com/a/1190000015278958

一：封装cookie方法
在util文件夹下，我们创建util.js文件，然后上代码

//设置cookieexport 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)
};//获取cookieexport 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 ""};export function delcookie(c_name) {
    setcookie(c_name, "", -1)
};

二、在HTTP中把cookie传到后台
关于这点，我需要说明一下，我们这里使用的是axios进行HTTP传输数据，为了更好的使用axios,我们在util文件夹下创建http.js文件，然后封装GET,POST等方法，代码如下：

import axios from 'axios' //引用axiosimport {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; 
export function fetch(url, params = {}) { 
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
} 
export function post(url, data = {}) {  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
  })
} 
export function patch(url, data = {}) {  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
  })
} 
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的朋友们，可以去恶补一下。后面我们将讲解如何使用它进行布局。登录组件的代码如下：

四、在路由中验证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'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 }，这个配置，主要为下面的验证做服务。

if(to.meta.requireAuth)，这段代码意思就是说，如果requireAuth: true ,那就判断用户是否存在。

如果存在，就继续执行下面的操作，如果不存在，就删除客户端的cookie,同时页面跳转到登录页。

以上就是cookie在项目中的使用，希望对大家的学习有所帮助，也希望大家多多支持