axios请求拦截、响应拦截，router导航守卫

朴灿烈づ我的快乐病毒、 2023-02-16 05:56 60阅读 0赞

axios请求拦截：可以在请求头统一添加token等

axios.interceptors.request.use(
      function (config) { 
      //从vuex中获取用户信息
        let user = store.state.userForm;
        if (user) config.headers.Authorization = `Bearer ${ user.token}`;
        return config;
      },
      function (error) { 
        return Promise.reject(error);
      }
    )

axios响应拦截：登录判断

//响应拦截：判断是否登录，
    axios.interceptors.response.use(function (response) { 
      // 对响应数据做点什么
      return response;
    }, function (error) { 
      // 对响应错误做点什么，如果没登录则打回登录页
      Vue.prototype.$message.error('请先登录');
      router.push('/login');
      return Promise.reject(error);
    });

导航前置守卫beforeEach：可以用来判断是否登录，但是最好用响应拦截

//to：去哪
    //from：从哪来
    //next：放行的方法，如果不传参表示的是想去哪就去哪，传参表示指定去哪
    router.beforeEach((to,from,next)=>{ 
    	if(to.path!= '/login') { 
    		let user = window.sessionStorage.getItem('user');
    		if(user){ 
    		//如果登录了就放行
    			next();
    		}else { 
    		//放行到login
    			next('/login');
    		}
    	}else { 
    		next();
    	}
    })

导航后置守卫：afterEach

router.afterEach((to,from)=>{ 
    })

*  beforeEach和afterEach是全局导航守卫，在router里面使用
 *  beforeRouteLeave 是组件内的导航守卫，是在 离开该组件的对应路由时调用

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

相关 axios拦截器，如何批量处理请求响应

axios拦截器 axios特性 axios拦截器具体实现进一步分离封装 axios特性从浏览器创建 XMLHttpReque

素颜马尾好姑娘i/ 2024年03月23日 21:55/ 0 赞/ 113 阅读

相关 axios进行请求的重发，请求/响应拦截，Token刷新

请求拦截 // 进行请求的拦截 axios.interceptors.request.use( // 正常拦截 request =>

以你之姓@/ 2023年10月11日 11:28/ 0 赞/ 23 阅读

相关 axios的请求拦截和vue路由的导航守卫有什么区别

在Vue项目中，有两种用户登录状态判断并处理的情况，分别为：导航守卫和axios拦截器。 1. 导航守卫：拦截组件导航守卫就是我们进行某些页面的时候需要判断当前

心已赠人/ 2023年10月06日 15:36/ 0 赞/ 50 阅读

相关 axios拦截请求跳转

　　官方文档：http://www.axios-js.com/zh-cn/docs/\%E6%8B%A6%E6%88%AA%E5%99%A8 　　拦截器定义好后的请求数据方法

系统管理员/ 2023年09月25日 12:10/ 0 赞/ 159 阅读

相关 axios的处理链流程:添加请求拦截器、添加响应拦截器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我会带着你远行/ 2023年06月17日 10:53/ 0 赞/ 52 阅读

相关请求拦截器和响应拦截器

请求拦截器请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。关于拦截，这里只说原理，前端的请求，最终还

待我称王封你为后i/ 2023年06月15日 10:00/ 0 赞/ 53 阅读

相关 VUE全局导航守卫、请求、响应拦截器的设置

[文件设置参考地址：][Link 1]https://gitee.com/wang\_yu5201314/headlines\_\_news/tree/master/%E9%A

爱被打了一巴掌/ 2023年02月21日 06:40/ 0 赞/ 27 阅读

相关 axios请求拦截、响应拦截，router导航守卫

axios请求拦截：可以在请求头统一添加token等 axios.interceptors.request.use( function (config)

朴灿烈づ我的快乐病毒、/ 2023年02月16日 05:56/ 0 赞/ 61 阅读

相关 vue-router导航守卫

1.导航守卫是什么官方这么说： > 正如其名， `vue-router` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。好吧，看不懂，就好（当）好（废）理（

￡神魔★判官ぃ/ 2022年09月09日 06:07/ 0 赞/ 236 阅读

相关 axios 二次封装、请求拦截、响应拦截

实际开发中，直接用axios的api方法比较麻烦，二次封装一下，要好用很多请求拦截：就是调接口之前，可以添加一些请求配置，headers token等等响应拦截：就

骑猪看日落/ 2021年09月19日 00:12/ 0 赞/ 693 阅读