前端中axios提供的前置拦截器和后置拦截器(前后端分离项目结合使用 ---- 见上篇博文)

前端axios的拦截器使用详解

最新推荐文章于 2023-08-25 17:33:00 发布

原创最新推荐文章于 2023-08-25 17:33:00 发布 · 2.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #session

本文详细介绍了在前端项目中，axios提供的请求前拦截器和响应后拦截器的用法，以及如何在前后端分离项目中结合使用，确保数据交互的安全性和效率。重点讨论了与ajax和session的配合策略。

给每个axios请求都添加一个前置拦截器，发送请求时添加请求头，在第一次后台发给前台一个jsessionid后，前台永久保存在浏览器端，在第二次...第n次进行操作发送请求时，都把
这个jsessionid传给后台，就可以获取到已登录用户，进行操作 （有些功能是必须登录才能操作的. ）

//1 使用axios前置拦截器，让所有的请求都携带token
axios.interceptors.request.use(config=>{
    //携带token
    let uToken =  localStorage.getItem("token");
    if(uToken){
        //我就在请求头里面添加一个头信息叫做U-TOKEN ==》jsessionid(token) 后台通过token作为key值可以在redis中获得loginUser的信息
        config.headers['U-TOKEN']=uToken;
    }
    return config;
},error => {
    Promise.reject(error);
});

使用：在axios发送请求后，得到一个res对象，进行回调函数前的拦截器
//2 使用axios后置拦截器，处理没有登录请求
axios.interceptors.response.use(res=>{
    let {success, result} = res.data;
    //用户没有登录
    if(!success && result==="noUser"){
    	//跳转登录界面
        location.href = "/login.html";
        return;
    }
    //后台redis用户已经过期了
    if(!success && result==="expireUser"){
        //移除localStorage
        localStorage.removeItem("token");
        localStorage.removeItem("loginUser");
        //跳转登录界面
        location.href = "/login.html";
        return;
    }
    return res;
},error => {
    Promise.reject(error);
})