Axios请求拦截器
Axios 的请求拦截器用于在发送请求前对请求进行一些预处理或修改。
在每次使用 Axios 发送请求之前,检查是否有有效的 token,并将它添加到请求头中,以便后端进行身份验证。
1.步骤 添加请求拦截器
request.js代码如下:
import { useTokenStore } from '@/stores/token.js'
//添加请求拦截器
instance.interceptors.request.use(
(config) => {
//请求前的回调
//添加token
const tokenStore = useTokenStore();
//判断有没有token
if (tokenStore.token) {
config.headers.Authorization = tokenStore.token
}
return config;
},
(err) => {
//请求错误的回调
Promise.reject(err)
}
)
在上述代码中,使用了 useTokenStore 函数从 @/stores/token.js 中导入了名为 tokenStore 的对象。然后,在请求拦截器中,检查了 tokenStore.token 是否存在,如果存在,则将其添加到请求的 headers.Authorization 中。
这样,每次发送请求之前,Axios 都会自动将 token 添加到请求头中,以便后端进行身份验证。
结论
通过使用 Axios 的请求拦截器,我们可以方便地在每次发送请求前执行一些预处理或修改操作,比如添加身份验证 token 到请求头中。这样可以使代码更加简洁高效,并且提高了请求的安全性和可靠性。