vue路由拦截器和请求拦截器知识点总结

更新时间：2019年11月08日 14:31:02 作者：巫小诗

在本篇文章里小编给各位整理的是一篇关于vue路由拦截器和请求拦截器知识点总结文章，有兴趣的朋友们学习下。

路由拦截器

已路由为导向

router.beforeEach((to,from,next)=>{
  if(to.path=='/login' || localStorage.getItem('token')){
   next();
  }else{
   alert('请重新登录');
   next('/login');
  }
})

请求拦截器

当发送请求时才会触发此功能

axios.interceptors.request.use(function (config) {
 let token = window.localStorage.getItem("token");
   if (token) {
     config.headers.token = token;  //将token放到请求头发送给服务器
   }
   return config; // 最终需要返回config
  }, function (error) {
    return Promise.reject(error);
});

知识点和代码非常简单，更多知识点可以在下方相关文章找到，感谢大家对脚本之家的支持。

您可能感兴趣的文章:

webpack+vue.js实现组件化详解
vue的开发体验还是比较愉悦的。首先文档非常友好，所以上手会比较快。其次，配合webpack和vue-loader，每个页面都是一个.vue文件，写起来很方便。所以很适合做组件化开发，这篇文章我们就来一起看看webpack+vue.js如何实现组件化。
2016-10-10
vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码
这篇文章主要介绍了vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考借鉴价值,需要的朋友参考下吧
2024-01-01
vue指令之表单控件绑定v-model v-model与v-bind结合使用
这篇文章主要介绍了vue指令之表单控件绑定v-model v-model与v-bind结合使用,需要的朋友可以参考下
2019-04-04
Vite引入虚拟文件的实现
本文主要介绍了Vite引入虚拟文件的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
nuxt.js 缓存实践
这篇文章主要介绍了nuxt.js 缓存实践，nuxt 的缓存可以分为组件级别缓存 , API级别缓存以及页面级别缓存，本文就详细的介绍了这三种缓存，感兴趣的小伙伴们可以参考一下
2018-06-06
Vue路由监听实现同页面动态加载的示例
本文主要介绍了Vue基于路由监听实现同页面动态加载的示例，重点在于切换路由的时候,重新拉取列表数据，接下来看看实现方法吧
2021-05-05
vue 代码压缩优化方式
这篇文章主要介绍了vue 代码压缩优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
深入浅析vue中cross-env的使用
cross-env是跨平台设置和使用环境变量的脚本。这篇文章主要介绍了vue中cross-env的使用,需要的朋友可以参考下
2019-09-09
Vue重要修饰符.sync对比v-model的区别及使用详解
这篇文章主要为大家介绍了Vue中重要修饰符.sync与v-model的区别对比及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue2.0结合Element实现select动态控制input禁用实例
本篇文章主要介绍了vue2.0结合Element实现select动态控制input禁用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05