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

目录

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

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

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

---

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

请求拦截在你发送请求的时候可以做
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官网！--------------------------