前端框架vue:利用axios.interceptiors.request.use(...)进行拦截session的判断

比如发送请求显示loading,请求回来loading消失之类,并且当判断到session为null时自动跳转到登录界面。
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import Loading from './components/Loading'
import stores from './store/store.js'
axios不能use哦


// 请求拦截(配置发送请求的信息)
axios.interceptors.request.use(
    config=>{
        //此处显示loading
        if(sessionStorage){
          //如果session为null就怎样
        }else{
          //如果session为null就怎样
          this.$router.push({path:'/Login'});
        }
    },err=>{
       // 请求失败的处理
     return Promise.reject(err);
 });


// 响应拦截(配置请求回来的信息)
axios.interceptors.response.use(    
    response=>{
        //此处添加将loading去掉的代码
        return response;
    }, err=>{
       return Promise.reject(err);
});
Vue.prototype.$http = axios  //其他页面在使用axios的时候直接  this.$http就可以了
### Vue3 Axios 请求拦截器添加 UserID 和 SessionID 在 Vue3 项目中通过 TypeScript 封装 `axios` 并利用请求拦截器来自动附加 `userid` 和 `sessionid` 是一种常见做法。这不仅简化了每次发送请求时手动加入这些参数的过程,还提高了代码的可维护性和安全性。 #### 创建 Axios 实例配置 首先,在项目的合适位置创建一个新的 JavaScript 或 TypeScript 文件用于初始化 `axios` 的实例,并在此处设置基础 URL 及其他全局默认选项: ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 应该从环境变量读取API的基础路径 timeout: 5000 // 设置超时时长 }); ``` #### 配置请求拦截器 接着定义请求拦截器以便于可以在每个发出的 HTTP 请求前处理数据,比如在这里插入用户的认证信息: ```javascript service.interceptors.request.use( config => { const userInformation = JSON.parse(localStorage.getItem('user') || '{}'); if (userInformation && userInformation.userid) { config.headers['X-user-id'] = userInformation.userid; } if (userInformation && userInformation.sessionid) { config.headers['X-session-id'] = userInformation.sessionid; } return config; }, error => Promise.reject(error) ); ``` 上述代码片段展示了如何获取存储在本地浏览器中的用户信息对象(假设是以字符串形式保存),并通过检查其是否存在以及是否含有有效的 `userid` 和 `sessionid` 来决定是否向请求头中添加相应的字段[^1]。 #### 处理响应拦截器 为了确保应用程序能够正确应对服务器返回的不同状态码或其他异常情况,还可以配置响应拦截器来进行统一错误处理或重定向逻辑: ```javascript service.interceptors.response.use( response => response.data, error => { console.error(`Error occurred during request ${error.config.url}`, error.message); if (!error.response) { alert("网络连接失败"); return Promise.reject(new Error("Network Error")); } else { switch (error.response.status) { case 401: window.location.href = '/login'; break; default: break; } return Promise.reject(error); } } ); ``` 最后导出这个自定义的服务实例供整个应用使用: ```javascript export default service; ``` 这样就完成了基于 Vue3 和 TypeScript 对 `axios` 进行封装的工作,使得后续所有的 API 调用都可以方便地携带必要的身份验证信息而无需重复编码[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值