vue导航守卫和axios拦截器的区别

 在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器。

一、什么是导航守卫?

  vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。(在路由跳转时触发

  我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

每个守卫方法接收三个参数:

  • to:  即将要进入的目标路由对象
  • from: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    • next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航
    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

  注意:一定要确保要调用 next 方法,否则钩子就不会被 resolved。

二、什么是axios拦截器?

  在请求或响应被 then 或 catch 处理前拦截它们,分为请求拦截器(发送请求前触发)和响应拦截器(得到响应结果后触发)。(在请求接口调用时触发

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

注意:一定要有返回值

三、导航守卫和拦截器的使用

  • 用户登录成功后我们将后台返回的用户token信息存储至sessionStorage中

  • 路由跳转时使用导航守卫

  • 发送axios请求时使用拦截器

原文地址:https://www.cnblogs.com/Ky-Thompson23/p/12545611.html

时间: 2024-10-15 00:29:58

vue导航守卫和axios拦截器的区别的相关文章

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

vue导航守卫

三部分 router(VueRouter实例)守卫 -- 全局路由守卫 router守卫 -- 路由守卫 component守卫 -- 组件守卫 const router = new Router({}) router.beforeEach(function (to,from,next) {} // export default router router.beforeEach(function (to,from,next) { // console.log(to,from) if(to.nam

Axios拦截器配置

Axios 拦截器的配置如下 分三块:基础配置.请求之前拦截.响应之前拦截 发送所有请求之前和操作服务器响应数据之前对这种情况过滤. http request 请求拦截器 每次发送请求之前判断是否存在 此时要是验证符合条件则通过,否则不符合的不给通过 具体代码如下: html文件 option2.php文件 因为博客园不支持上传js文件 只能截图了 至此,就可以看到结果了,就可以看到控制台的打印信息 原文地址:https://www.cnblogs.com/ddlove/p/9957087.ht

Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子.执行效果依赖 next 方法的调用参数. next(): 进行管道中的下一个钩子.如果全部钩子执行完了,则导航的状态就是 confirmed (确认的). next(false): 中断当前的导航.如果浏览器的 URL 改变了(可能是用

过滤器和拦截器的区别

---------------------siwuxie095 过滤器和拦截器的区别 过滤器:过滤器理论上能过滤任何内容,如:HTML.JSP.Servlet.图片路径 拦截器:拦截器只能拦截 Action 附: Servlet 和 Action 的区别 Servlet:默认第一次访问时创建,创建一次,是单实例对象 Action:每次访问时都创建,创建多次,是多实例对象 [made by siwuxie095]

(转)过滤器和拦截器的区别

1.拦截器是基于java的反射机制的,而过滤器是基于函数回调 2.过滤器依赖与servlet容器,而拦截器不依赖与servlet容器 3.拦截器只能对action请求起作用,而过滤器则可以对几乎所有的请求起作用 4.拦截器可以访问action上下文.值栈里的对象,而过滤器不能 5.在action的生命周期中,拦截器可以多次被调用,而过滤器只能在容器初始化时被调用一次 拦截器 :是在面向切面编程的就是在你的service或者一个方法,前调用一个方法,或者在方法后调用一个方法比如动态代理就是拦截器的

Servlet,过滤器,监听器,拦截器的区别

<因时间仓促,引用别人的博文> 想起struts2和struts1的区别的时 候,发现为什么struts1要用servlet,而struts2要用filter呢?一时又发现,servlet和filter有什么区别呢?于是看 了看web.xml,一时又发现,咦,servlet.filter.listener?还有个interceptor? 慢慢来吧,需要补课的地方还有很多很多呀.初学的时候都不知道他们存在呢.呵呵. 下面从几个方面阐述一下题目中四个概念的区别与联系: 1.概念 2.生命周期 3.

Struts2中过滤器和拦截器的区别

拦截器和过滤器的区别: 1.拦截器是基于java的反射机制的,而过滤器是基于函数回调 2.过滤器依赖与servlet容器,而拦截器不依赖与servlet容器 3.拦截器只能对action请求起作用,而过滤器则可以对几乎所有的请求起作用 4.拦截器可以访问action上下文.值栈里的对象,而过滤器不能 5.在action的生命周期中,拦截器可以多次被调用,而过滤器只能在容器初始化时被调用一次 拦截器 :是在面向切面编程的就是在你的service或者一个方法前调用一个方法,或者在方法后调用一个方法比

Java 过滤器、监听器、拦截器的区别

原文:http://www.360doc.com/content/10/0601/09/495229_30616324.shtml 1.过滤器 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml文件配置好要拦截的客户端请求,它都会帮你拦截到请求,此时你就可以对请求或响应(Request.Response)统一设置编码,简化操作:同时还可进行逻辑判断,如用户是否