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

朴灿烈づ我的快乐病毒、 2023-02-16 05:56 22阅读 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 条评论，22人围观）

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

相关阅读

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

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

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

相关（简单实用）vue路由登录拦截（导航守卫拦截关键代码逻辑）

导航守卫拦截代码逻辑 router.beforeEach((to, from, next) => { let islogin = localStorage

太过爱你忘了你带给我的痛/ 2023年10月14日 23:45/ 0 赞/ 34 阅读

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

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

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

相关 axios拦截请求跳转

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

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

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

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

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

相关 vue-router导航守卫

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

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

相关 axios http拦截器处理请求

axios使用拦截器 > 在请求或响应被 then 或 catch 处理前拦截它们。 http request拦截器 // http request拦截

曾经终败给现在/ 2022年05月28日 09:56/ 0 赞/ 306 阅读

相关 Vue中使用Axios拦截器（拦截请求与相应）

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Features 从浏览器中创建 [XMLHttpRequest

我就是我/ 2022年02月19日 10:36/ 0 赞/ 348 阅读

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

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

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

相关 vue中使用axios时封装公共方法（响应拦截器，请求拦截器）

npm install axios --save //安装依赖与main.js平行处创建http.js文件 import axios from

古城微笑少年丶/ 2021年09月01日 07:58/ 0 赞/ 536 阅读