vue请求拦截,响应拦截,路由导航守卫的一些语法和使用场景

您所在的位置:网站首页 拦截什么意思 vue请求拦截,响应拦截,路由导航守卫的一些语法和使用场景

vue请求拦截,响应拦截,路由导航守卫的一些语法和使用场景

2023-08-16 18:08| 来源: 网络整理| 查看: 265

目录

一.为什么要有请求拦截呢?请求拦截都做了什么?

二.什么是响应拦截器?可以做什么?

三.什么是路由拦截?为什么要设置路由拦截?

一.为什么要有请求拦截呢?请求拦截都做了什么?

请求拦截在你发送请求的时候可以做 1.比如说你每次发送请求的时候有的请求需要携带token,每次发就会重复 这个时候请求拦截就可以在你发请求之前做封装请求头的操作,把需要请求头的存起来

2.还可以做的是在你有些时候加载不出来,然后让页面显示正在加载中

二.什么是响应拦截器?可以做什么?

响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。

响应拦截器也是一样如此,就是在请求结果返回后,先不直接导出,而是先对响应码等等进行处理,处理好后再导出给页面,如果将这个对响应码的处理过程抽出来,就成了所谓的响应拦截器;

比如当我们token值过期的时候,我们在响应器中统一做处理  

三.什么是路由拦截?为什么要设置路由拦截?

我们思考一个问题,如果一个用户未登录,进入到首页,能成功获取到用户的个人信息么? 我们要求用户未登录,我们禁止用户访问首页 比如有些页面组件需要登录才可以操作---这个时候使用路由前置导航来进行页面拦截  

导航守卫有哪些? 全局前置守卫   ---router.beforeEach 里面有三个参数 1.to =>表示的是即将要进入的目标 路由对象 2. from=>表示的是当前导航正要离开的路由 3.next=>它是一个函数,通俗来说就是放行的意思 可以写next()---放行的意思 next(false): 中断当前的导航

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址

next(error):如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

--------注意--------确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。

全局解析守卫

可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。

全局后置钩子  router.afterEach((to, from) => {}) 可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身

--------------------路由导航守卫更加详细的请参考vue官网!--------------------------  



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3