场景
当我们在前后端分离的项目中,前端就需要封装一个request.js文件来统一封装请求,在请求拦截器和响应拦截器中做一些事情。我用到的是axios。
报错原因
在请求拦截器中,使用pinia存储的token,
ts
import axios from 'axios'
import useUserStore from '@/store/user'
const userStore = useUserStore()
// 创建axios实例
const request = axios.create({
baseURL: 'http://192.168.11.111:4041/api',
timeout: 3000,
})
// axios请求拦截器
request.interceptors.request.use(
async (config) => {
// 配置请求头
const authorization = userStore.accessToken
// 验证token
if (authorization) {
config.headers.authorization = 'Bearer ' + authorization
}
return config
},
(e) => Promise.reject(e),
)
// axios响应式拦截器
request.interceptors.response.use(
(res) => res.data,
(e) => {
return Promise.reject(e)
},
)
export default request
解决方案
Pinia store 依靠 pinia
实例在所有调用中共享同一个 store 实例。大多数时候,只需调用你定义的 useStore()
函数,完全开箱即用。例如,在 setup()
中,你不需要再做任何事情。但在组件之外,情况就有点不同了。 实际上,useStore()
给你的 app
自动注入了 pinia
实例。这意味着,如果 pinia
实例不能自动注入,你必须手动提供给 useStore()
函数。
此时仅需要将 const userStore = useUserStore() 放入 请求拦截器中即可
ts
// axios请求拦截器
request.interceptors.request.use(
async (config) => {
const userStore = useUserStore()
// 配置请求头
const authorization = userStore.accessToken
// 验证token
if (authorization) {
config.headers.authorization = 'Bearer ' + authorization
}
return config
},
(e) => Promise.reject(e),
)
具体可参考pinia官方文档:pinia.vuejs.org/zh/core-con...