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

---

http.ts

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()breakcase 500:ElMessage.error(res.data.message)breakcase 200:// if (!hideTips)//   ElMessage.success(res.data.message)resolve(res.data)breakdefault: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()breakcase 500:ElMessage.error(res.data.message)resolve(res.data)breakcase 200:if (showTips)ElMessage.success(res.data.message)resolve(res.data)breakdefault: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)breakcase 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

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文件

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