Loading... # axios封装token示例 在使用 Axios 发送请求时，可以通过添加 Authorization 头部信息传递 Token。为了方便地在多个请求中使用 Token，可以封装一个 Axios 实例，并在其中添加 Token。 下面是一个简单的封装 Axios 实例并添加 Token 的例子： ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com/', }); // 添加请求拦截器 instance.interceptors.request.use( config => { // 在请求中添加 Token const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { // 请求错误时的处理 console.log(error); return Promise.reject(error); } ); export default instance; ``` 在上面的例子中，首先使用 `axios.create` 创建了一个 Axios 实例，并设置了默认的 base URL。 然后，通过 `instance.interceptors.request.use` 方法添加了请求拦截器。在请求拦截器中，判断是否存在 Token，并将 Token 添加到请求的 Authorization 头部中。 最后，通过 `export default instance` 导出封装好的 Axios 实例，以供其他模块使用。在其他模块中，可以像使用原始的 Axios 一样使用该实例，不必在每个请求中都手动添加 Token。例如： ```javascript import axios from './axios'; axios.get('/api/data').then(response => { console.log(response.data); }).catch(error => { console.log(error); }); ``` 除了添加 Token，我们还可以对 Axios 进行更进一步的封装，使其在多个请求中具有相同的行为。 以下是一个较为完整的 Axios 封装例子，它实现了以下功能： - 添加了一个请求拦截器，在请求中添加 Token 和其他公共参数； - 添加了一个响应拦截器，在响应中统一处理错误； - 对于 HTTP 状态码非 200 的响应，会将错误信息以 Promise.reject 的形式返回，便于在调用处处理错误； - 对于 401 错误（未授权），会自动跳转到登录页面。 ```javascript import axios from 'axios'; import router from './router'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, timeout: 10000, withCredentials: true, }); // 添加请求拦截器 instance.interceptors.request.use( config => { // 在请求中添加 Token 和其他公共参数 const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } config.params = { ...config.params, app_id: process.env.VUE_APP_APP_ID, }; return config; }, error => { console.log(error); return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( response => { // 对于 HTTP 状态码非 200 的响应，将错误信息以 Promise.reject 的形式返回 if (response.status !== 200) { return Promise.reject(response.data); } return response.data; }, error => { // 对于 401 错误，自动跳转到登录页面 if (error.response && error.response.status === 401) { router.push('/login'); } console.log(error); return Promise.reject(error); } ); export default instance; ``` 在上面的例子中，我们使用了环境变量 VUE_APP_API_BASE_URL 和 VUE_APP_APP_ID 分别存储了 API 的基础 URL 和应用程序的 ID，以便在请求拦截器中使用。 在响应拦截器中，我们判断了 HTTP 状态码非 200 的响应，并将错误信息以 Promise.reject 的形式返回。对于 401 错误，我们自动跳转到登录页面。 在其他模块中使用该封装好的 Axios 实例时，只需要像这样导入即可： ```javascript import axios from './axios'; axios.get('/api/data').then(response => { console.log(response); }).catch(error => { console.log(error); }); ``` # 相关文章 <a class="post_link" href="https://www.xxhzm.cn/archives/789/"><i data-feather="file-text"></i>vue2使用ajax发送网络请求</a> <a class="post_link" href="https://www.xxhzm.cn/archives/790/"><i data-feather="file-text"></i>vue3使用ajax发送网络请求</a> <a class="post_link" href="https://www.xxhzm.cn/archives/791/"><i data-feather="file-text"></i>axios封装示例</a> 猜你想看 nuxt3使用element-plus JS作用域闭包 CSS3 Flex布局使用说明 axios封装示例 蓝易云暑期大采购活动 每日一学：PHP 中的array_sum函数详解 使用nginx反代jsdelivr 正则表达式 Vue插槽 Golang 中 printf 占位符详解 最后修改：2023 年 05 月 02 日 © 允许规范转载 赞 1 如果觉得我的文章对你有用，请随意赞赏
1 条评论
这个博客有必要收藏