响应拦截和请求拦截_请求拦截和响应拦截

响应拦截和请求拦截：

1、请求拦截器

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

关于拦截，这里只说原理，前端的请求，最终还是离不开 ajax，像vue 的 vue-resource 、axios，都只是对ajax进行了统一的封装，它暴露出来的拦截器，其实就是写了一个方法，把ajax写在这个方法里面，（我们先说请求拦截器）在执行这个方法的时候，先将请求时要添加给请求头的那些数据（token、后端要的加密码…具体要看实际情况）先执行一遍，都赋值给一个变量，然后再统一传给ajax，接下来就是执行ajax，这就是所谓的请求拦截，其实就是先执行要添加的数据，然后再执行ajax，如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器；

2、响应拦截器：

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

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

3、它们的共同点都是:都是提前做了一些操作，可以作为程序优化的一种处理方式；

代码示例：

（1）请求头信息的设置

axios.interceptors.request.use(config=>{
    console.log('本次的请求头信息为:'+config.url);
    // 在这里判断是否是登录页面，不是登录页面的时候，访问其它页面需要有一个令牌
    if(config.url !== baseUrl+'/api/userlogin'){
        // 设置响应头
        config.headers.authorization = store.state.user.token;
    }
    return config;
})

（2）设置一个响应的拦截
axios.interceptors.response.use(res=>{
    console.group('本次响应路径为'+res.config.url);
    console.log(res);
    // 在这里的时候我们需要做一个判断，要是用户信息过期了，我们需要将其跳转到首页，让它再次进行登录
    if(res.data.code !== 200){
        // 在这里再次进行判断，要是出现403的话，则就跳转到登录页面，重新登录，要不是的话，则直接弹出错误提示
       if(res.data.code==403){
           router.push('/login')
       }
          errorAlert(res.data.msg);
          return;
    }
    return res
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27