vue3 ts 封装axios,配置axios前置拦截器，让所有axios请求携带token

http.ts
app.ts
vue文件

http.ts

javascript 复制代码

import axios from 'axios' // 引入axios
import router from '@/router'
import Qs from 'qs'
import { ElMessage } from 'element-plus'


const { prefixBasePath } = require('../../../config/basePath')
axios.defaults.baseURL = prefixBasePath;

// 配置axios前置拦截器，作用是让所有axios请求携带token，后台需要token校验是否登录
axios.interceptors.request.use(config => {
  // 1.从缓存中获取到token,这里的Authorization时登录时你给用户设置token的键值
  let authorization = localStorage.getItem("Authorization");
  // 2.如果token不为null，那么设置到请求头中，此处哪怕为null，我们也不进行处理，因为后台会进行拦截
  if (authorization) {
  //后台给登录用户设置的token的键时什么，headers['''']里的键也应该保持一致
    config.headers['Authorization'] = authorization;
  }
  // 3.放行
  return config;
}, error => {
//失败后抛出错误
  Promise.reject(error);
})

//  *   --------------------  get请求  --------------------
// get请求
// 1、根据id查看一条信息
// 2、获取所有数据，展示表格数据
export function getOneOrAllData(url: any, params: any, hideTips: any) {
  return new Promise((resolve, reject) => {
    showLoading()
    axios.get(url, {
      params: params,
      // 解决get传数组问题，主要是以下五行代码
      paramsSerializer: {
        serialize: function (params) {
          return Qs.stringify(params, { arrayFormat: 'repeat' })
        }
      },
    })
      .then(res => {
        hideLoading()
        switch (res.data.code) {
          case 401:
            jumpToLogin()
            break
          case 500:
            ElMessage.error(res.data.message)
            break
          case 200:
            // if (!hideTips)
            //   ElMessage.success(res.data.message)
            resolve(res.data)
            break
          default:
            Toast(res.data.message)
            resolve(res.data)
            break
        }
      })
      .catch(err => {
        errMsg(err)
        reject(err)
      })
  })
}

//  *   --------------------  post请求  --------------------
// （非）formData格式
// 添加、修改
// flag为true，不弹提示窗
export function addOrReviseData(url: any, params: any, showTips: any, hideLoads: any) {
  return new Promise((resolve, reject) => {
    // {
    //   headers: {
    //     'Content-Type': 'multipart/form-data'
    //   }
    // }
    if (!hideLoads)
      showLoading()
    axios.post(url, params)
      .then(res => {
        hideLoading()
        switch (res.data.code) {
          case 401:
            jumpToLogin()
            break
          case 500:
            ElMessage.error(res.data.message)
            resolve(res.data)
            break
          case 200:
            if (showTips)
              ElMessage.success(res.data.message)
            resolve(res.data)
            break
          default:
            resolve(res.data)
            break
        }
      })
      .catch(err => {
        errMsg(err)
        reject(err)
      })
  })
}

//  *   --------------------  登录、退出  --------------------
// 登录 - post
export function logIn(url: any, params: any) {
  return new Promise((resolve, reject) => {
    showLoading()
    axios.post(url, params)
      .then(res => {
        switch (res.data.code) {
          case 500:
            ElMessage.error(res.data.message)
            break
          case 200:
            ElMessage.success(res.data.message)
            resolve(res.data)
            break
        }
      })
      .catch(err => {
        errMsg(err)
        reject(err)
      })
  })
}

// 退出 - get
export function logOut(url: any, params: any) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params: params })
      .then(res => {
        ElMessage.success(res.data.message)
        jumpToLogin(true)
      })
      .catch(err => {
        jumpToLogin(true)
      })
  })
}

// 跳转到登录页
function jumpToLogin(showTips) {
  router.push({ path: '/login' })
}

app.ts

javascript 复制代码

import { getOneOrAllData, addOrReviseData, logIn, logOut} from './http'

// import router from '@/router'
// if (router.app._route.path.includes('/onLineRegister/')) {
//   return '/globalApi/app'
// }
function GlobalUrl() {
  return '/globalApi'
}

export const login = (p: any) => logIn(GlobalUrl() + '/login', p, false)//登录
export const logout = (p: any) => logOut(GlobalUrl() + '/logout', p, false)//退出
export const addOrUpdate = (p: any) => addOrReviseData(GlobalUrl() + '/addOrUpdate', p, true)//增加/修改信息
export const getList = (p: any) => getOneOrAllData(GlobalUrl() + '/getList', p, false)//查询数据

vue文件

javascript 复制代码

import { login } from "@/app"
login(){
	login(form).then((res: any) => {
		console.log(res)
	}
}