vue中的请求拦截响应

请求拦截一般做什么操作?

 　　第一:判断用户是否登录,没有登录的统一跳转到登录页面.

　　第二:判断用户是否具有权限,没有权限,提示权限不足.

　　...

　　每个项目可能做的处理不一样,看自己需求.

响应拦截有什么用?

　　因为后端每次响应都不一定是成功的,然后前端需要根据不同状态去做不同的处理,如果每个请求都去做处理,会多出很多重复的代码,并且显的很臃肿.

　　例如:后端返回资源不存在,token失效,权限不足,重定向等等

　　这样我们就可以直接在响应拦截中做一次处理,这样每个请求响应的时候都会经过这一逻辑,减少大量重复代码.看起来也更加美观.

下面上代码:

首先我们要在项目中找到main.js文件

然后引入axios

 接下来就是添加拦截器了,首先是请求拦截

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 判断是否存在token,如果存在将每个页面header添加token
  if (sessionStorage.getItem("token")) {
    config.headers.common['Authorization'] = sessionStorage.getItem("token");
  }
  return config
}, function (error) {
  router.push('/login')
  return Promise.reject(error)
})

至于需要在拦截之前做什么操作,就看自己需求了,以上是添加token的操作

下面的响应拦截,看需求,不需要可以不添加

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  if (error.response) {
    switch (error.response.status) {
      case 401:
        store.commit('del_token')
        router.push('/login')
    }
  }
  return Promise.reject(error)
})

好了,到处我们需要的拦截器就完成了,当然了,以上我们只是添加了,以及引入了axios,并没有挂载到vue,所以最后一步不要忘记哦

 至此就完美结束了.