vue--配置 请求/响应拦截器

配置响应拦截器

在案例中后端传输给我的数据包括：响应码（code），响应信息（message） ， 对象

由于我们前端在发送一个请求时，服务端的响应也许会各不相同，我们前端所做出的处理也会不一样。

可是如果在每个事件里都单独将对于这些不同响应的处理都写一遍，代码十分冗余，浪费时间，可读性也不高。

所以：我们要为前端要配置一个响应拦截器，将每一次服务器的响应都拦截下来做一次判断和对应的操作，再将数据传出。

配置请求拦截器

请求拦截器中的token，是后端颁发给我们的通行令牌。用于登录，后来的界面访问权想等等都是有很大作用的。在此案例中，一旦用户合法登录账号，后端的响应里会提供给前端一个 token 令牌。前端为了可以方便的在每一次请求前携带这个令牌，会将 token 存储在sessionStorage 中。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

请求拦截器就是会将每一次请求拦截，判断 sessionStorage 中是否含有 token ， 做出相应的对相应的处理

接下来，就上具体步骤：

1.配置安装’axios’

axios的作用：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。
在终端运行 npm install axios
package.json 目录中会多出：

"dependencies": {
    "axios": "^0.21.1",
   ……
  },

2.配置响应拦截器

首先在src目录下建立文件夹，新建api.js文件

目录如下：

在api.js文件里：

1.

首先与要导入’axios‘模块
由于会出现’未登录‘的状态响应码，需要跳转到登陆页面（案例中的路径是’/‘），需要引入router
导入message组件做出消息提示。

2.

api接口的相应会有两种大的情况：前端成功获得了后端的响应；前端没有获得后端的相应。
axios.interceptors.response.use((success) => {} , (error)=>{})
其中， (success)=>{} 中，前端具体提供什么信息，又由后端提供的响应码(code)，来决定。

例：如果前端成功获取后端响应，但是操作违反了后端的业务逻辑，后端会响应500 ， 401 ， 403 这样的响应码。同时前端可以把响应携带的响应信息(message)抛出给用户。

3.

封装请求。使用base ，如果日后url需要加上前缀，可以直接添加设置。

import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router/index'

//请求拦截器
axios.interceptors.request.use((config) => {
//如果存在token，请求携带token
if(window.sessionStorage.getItem('tokenStr')){
config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
}
return config ;
}, (error) => {
   Message.error({ message: error });
})

//api接口 响应成功 / 响应失败 【响应拦截器】
//后端提供：响应码，响应信息，对象
axios.interceptors.response.use((success) => {
   if (success.status && success.status == 200) {
      if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) {   //接口请求成功，业务逻辑错误
         Message.error({ message: success.data.message });
         return;
      }
      if (success.data.message) {
         Message({ message: success.data.message });
      }
   }
   return success.data;
}, (error) => {
   if (error.response.code == 504 || error.response.code == 404) {
      Message.error({ message: '服务器被吃了( ╯□╰ )' });
   } else if (error.response.code == 403) {
      Message.error({ message: '权限不足，请联系管理员' });
   } else if (error.response.code == 401) {
      Message.error({ message: '请登录账号' });
      router.replace('/');
   } else {
      if (error.response.message) {
         Message({ message: error.response.message });
      } else {
         Message({ message: '该错误触及盲区(●ˇ∀ˇ●)' });
      }
   }
});

//封装请求
//post
let base = '';
export const postRequest = (url, params) => {
   return axios({
      method: 'post',
      url: '${base}${url}',
      data: params
   })
};

//put
export const putRequest = (url, params) => {
   return axios({
      method: 'put',
      url: '${base}${url}',
      data: params
   })
};

//get
export const getRequest = (url, params) => {
   return axios({
      method: 'get',
      url: '${base}${url}',
      data: params
   })
};

//del
export const deleteRequest = (url, params) => {
   return axios({
      method: 'delete',
      url: '${base}${url}',
      data: params
   })
};

最后不要忘记在入口js文件中引入api.js。
以上，就是我学习配置响应拦截器的全部步骤。
记录下来，希望对大家有帮助哦。