Axios请求拦截器

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 到请求头中。这样可以使代码更加简洁高效，并且提高了请求的安全性和可靠性。