Vue2 和 Vue3 封装 axios和cookies，完成请求效验

---

本文归纳整理vue2和vue3 对axios的封装代码，以及如何在web端操作使用cookies中存储的token来做效验之类的操作。
vue2 使用的是 axios+vue-cookies组件实现
vue3 使用的是 axios+js-cookies组件实现

---

---

一 Vue2 使用axios+cookie

vue2本文推荐使用 axios + vue-cookie 来完成request的封装和操作cookie

1.安装axios和 vue-cookie

npm install axios
npm install --save vue-cookies 

2.在main.js中挂载axios和vue-cookie

import Vue from 'vue'
import App from './App.vue'
import VueCookies from 'vue-cookies'
import axios from 'axios'


//挂载axios和vuecookie到对象上
Vue.prototype.$axios = axios;
Vue.use(VueCookies)

new Vue({
  render: h => h(App)
}).$mount('#app')

3.axios封装请求 && 效验存储到cookie中的token

新建 utils/httpRequest.js

/**
 * @author cv大虾
 * @description axios+cookie+element-ui 封装request
 *  axios封装request && 效验存储到cookie中的token
 */
import axios from 'axios'
import { Loading, Message } from 'element-ui'
import Vue from 'vue'


const instance = axios.create({
  baseURL: '/api',
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})

/**
 * 请求拦截
 */
instance.interceptors.request.use(config => {
  //使用cookie 效验token
  if (Vue.$cookies.get('token')) {
    config.headers['Authorization'] = Vue.$cookies.get('token') // 请求头带上token
  }
  return config
}, error => {
  Message.error('网络请求超时，请稍后重试...')
  return Promise.reject(error)
})

/**
 * 响应拦截
 */
instance.interceptors.response.use(response => {
  if (response.data && response.status === 200) {
    return response.data
  } else {
    return response
  }
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        Message.error('请求错误')
        break
      case 401:
        Message.error('授权过期，请重新登录')
        break
      case 403:
        Message.error('拒绝访问')
        break
      case 404:
        Message.error(`请求地址出错: ${err.response.config.url}`)
        break
      case 408:
        Message.error('请求超时')
        break
      case 500:
        Message.error('服务器内部错误')
        break
      case 501:
        Message.error('服务未实现')
        break
      case 502:
        Message.error('网关错误')
        break
      case 503:
        Message.error('服务不可用')
        break
      case 504:
        Message.error('网关超时')
        break
      case 505:
        Message.error('HTTP版本不受支持')
        break
      default:
        Message.error('未知错误，请联系管理员')
    }
  }
  return Promise.reject(err)
})

class http {
  static async get (url, params) {
    let res = await instance.get(url, { params })
    return res
  }
  static async post (url, params) {
    let res = await instance.post(url, params)
    return res
  }
}

export default http

使用封装的axios，新建 api/user.js，作为所有与user相关请求的调用入口

/**
 * @author CV大虾
 * @description 用户相关接口封装处理
 */
import http from '../utils/httpRequest.js'

export const login = (params) => http.post('/auth/login', JSON.stringify(params))

在登录的时候将token存储到cookie中

import * as user from "../api/user.js";

export default {

 methods: { 
  loginUser(loginRequest) {
      user.login(this.loginRequest).then(res => {
            if (res.code === 1) {
              // 将token 存储到 cookies中
              this.$cookies.set("token", res.data.token, 12 * 60 * 60 + "s");
              this.$message({
                message: "登录成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.judgeUserType();
                }
              });
            } else {
              this.$message.error(res.data);
            }
          });
        }
    },
}
}

---

二 Vue3 使用 axios+cookie

vue3 本文推荐使用 axios + js-cookies 来完成request的封装和操作cookie

1.安装axios和 vue-cookie

npm install axios
npm install js-cookie

2.在main.js中挂载axios

import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

import axios from 'axios'

import VueCookies from 'vue-cookies'



const app=createApp(App);

app.config.globalProperties.$axios = axios;  //全局挂载 同vue2.x Vue.prototype.$axios

app.use(store).use(router).use(VueCookies).mount("#app");

3.封装ts-cookies 工具类

utils/cookie.js

import Cookie from 'js-cookie'

export function setCookie(key, value) {
    Cookie.set(key, value)
}

//默认ts是天，可以传时间戳
export function setCookieTs(key, value,ts) {
    Cookie.set(key, value,{ expires: ts })
}

export function getCookie(key) {
    return Cookie.get(key)
}
export function removeCookie(key) {
    Cookie.remove(key)
}

4.axios封装请求 && 效验存储到cookie中的token

/**
 * by:cv大虾
 * axios+uniapp 请求封装处理
 */
import axios from "axios";
import Vue from 'vue'
import * as cookies from '../utils/cookie'   

const instance = axios.create({
  // baseURL:""
  timeout: 1000 * 30,
  withCredentials: true, //当前请求为跨域类型时是否在请求中协带cookie。
  headers: {
    "Content-Type": "application/json;charset=utf-8",
  },
});

/**
 *  请求拦截
 */
instance.interceptors.request.use(
  (request) => {
     if (cookies.getCookie("token")) {
        request.headers["Authorization"] = Vue.$cookies.get("token"); // 请求头带上token
     }
    return request;
  },
  (error) => {
    uni.showLoading({
      title: "网络请求超时，请稍后重试",
      icon: "error",
    });
    return Promise.reject(error);
  }
);

/**
 * 拦截响应
 */
instance.interceptors.response.use(
  (response) => {
    if (response.data && response.status === 200) {
      return response.data;
    } else {
      return response;
    }
  },
  (err) => {
    console.log(cookies.getCookie("token"))
    if (err && err.response) {
      const err_str = "";
      switch (err.response.status) {
        case 400:
          err_str = "请求错误";
          break;
        case 401:
          err_str = "授权过期，请重新登录";
          break;
        case 403:
          err_str = "拒绝访问";
          break;
        case 404:
          err_str = "请求地址出错: ${err.response.config.url}";
          break;
        case 408:
          err_str = "请求超时";
          break;
        case 500:
          err_str = "服务器内部错误";
          break;
        case 501:
          err_str = "服务未实现";
          break;
        case 502:
          err_str = "网关错误";
          break;
        case 503:
          err_str = "服务不可用";
          break;
        case 504:
          err_str = "网关超时";
          break;
        case 505:
          err_str = "HTTP版本不受支持";
          break;
        default:
          err_str = "未知错误，请联系管理员";
      }
    }
    return Promise.reject(error);
  }
);

class http {
  static async get(url, params) {
    let res = await instance.get(url, { params });
    return res;
  }
  static async post(url, params) {
    let res = await instance.post(url, params);
    return res;
  }
}


export default http;

使用封装的axios，新建 api/user.js，作为所有与user相关请求的调用入口

/**
 * @author CV大虾
 * @description 用户相关接口封装处理
 */
import http from '../utils/httpRequest.js'

export const login = (params) => http.post('/auth/login', JSON.stringify(params))

在登录的时候将token存储到cookie中

//引入工具类
import * as cookies from '../utils/cookie'
import * as user from "../api/user.js";

export default {

  methods: { 
      loginUser(loginRequest) {
          user.login(this.loginRequest).then(res => {
                if (res.code === 1) {
                  let seconds = 60;
                   //设置12小时过期 （60秒（1分钟）* 60分钟 * 12 小时）
                  let expires = new Date(new Date() * 1 + seconds * 1000 * 60 * 12);
                  // 将token 存储到 cookies中
                  cookies.setCookieTs("token", res.data.token, 12 * 60 * 60 + "s");
                  this.$message({
                    message: "登录成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                      this.judgeUserType();
                    }
                  });
                } else {
                  this.$message.error(res.data);
                }
              });
            }
        },
    }

}