Vue3中实现axios请求拦截器、响应拦截器以及Pinia持久化管理

一、Axios

1.安装axios

npm i axios

2.创建axios实例

import axios from 'axios'

// 创建axios实例
const http = axios.create({
  baseURL: ' ',//请求基地址
  timeout: 5000 //配置超时时间
})

3.axios请求拦截器

// axios请求拦截器
http.interceptors.request.use(config => {
 // 1. 从pinia获取token数据
 const userStore = useUserStore()
 // 2. 按照后端的要求拼接token数据
 const token = userStore.userInfo.token
 if (token) {
   config.headers.Authorization = `Bearer ${token}`
 }
  return config
}, e => Promise.reject(e))

4.axios响应拦截器

// axios响应式拦截器
http.interceptors.response.use(res => res.data, e => {
  const userStore = useUserStore()
  //统一错误提示
  ElMessage({
    type: 'warning',
    message: e.response.data.message   
  })
  //401状态码，表示token过期，需要重新登录
  //1.清除本地用户数据
  //2.跳转到登录页面

  if (e.response.status === 401) {
    userStore.clearUserInfo()
    //跳转到登录页面
    router.push('/login')
  }
  return Promise.reject(e)
})

5.导出http

export default http 

6.组件中引入http

 import http from "@/utils/http" 

二、Pinia

1.安装pinia并注册

npm i pinia

import { createPinia } from 'pinia'

const app = createApp(App)
// 以插件的形式注册
app.use(createPinia())
app.mount('#app')

2.定义用户Stores/user.js对用户信息进行持久化管理

// 管理用户数据相关

import { defineStore } from 'pinia'
import { ref } from 'vue'
import { loginAPI } from '@/apis/user'

export const useUserStore = defineStore('user', () => {
  // 1. 定义管理用户数据的state
  const userInfo = ref({})
  // 2. 定义获取接口数据的action函数
  const getUserInfo = async ({ account, password }) => {
    const res = await loginAPI({ account, password })
    userInfo.value = res.result
  }
  //退出时清除用户对象
  const clearUserInfo = () => {
    userInfo.value = {}
  }
  // 3. 以对象的格式把state和action return
  return {
    getUserInfo,
    userInfo,
    clearUserInfo
  }
}, {
  persist: true,
})