学习笔记之初始化前端项目---接口拦截 angular和vue的接口拦截

以下参考https://blog.csdn.net/jing165121/article/details/52064656学习

angularjs接口权限

通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行，因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝，导致 $http 调用失败。

通过实现 response 方法拦截响应: 该方法会在 $http 接收到从后台过来的响应之后执行，因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数，然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝，导致 $http 调用失败。

通过实现 requestError 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置，比如说关闭进度条，激活按钮和输入框什么之类的。

通过实现 responseError 方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了，或者被上一个响应拦截器中断了。在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。

angular.module("com.cmp.app").factory('UserInterceptor', [ '$q',function($q) {
  var httpInterceptor = {
    'responseError': function (response) {
      return $q.reject(response);
    },
    'response': function (response) {
      return response;
    },
    'request': function (config) {
      return config;
    },
    'requestError': function (config) {

      return $q.reject(config);
    }
  }
  return httpInterceptor;
}]
)

将上述注入到config中

$httpProvider.interceptors.push('UserInterceptor');

 

vue接口拦截

axios.interceptors.request.use(config => {
  // 在请求拦截里，可以做一些事情，也可以不做，不需要的话，暂时不要管这句话
  return config
}, error => {
  Promise.reject(error)
})

// // response 拦截器

axios.interceptors.response.use(
  response => {
    //状态码填写
    if(response.status==200){
      //可以添加超时设置
       if(超时){
       router.replace({
         path: '/',
       });

      }
      return response;
    }

  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回 401 清除token信息并跳转到登录页面
          store.commit(types.LOGOUT);
          router.replace({
            path: '/',
          });
          break;
        case 504:
          Message.info('网关错误');
           router.replace({
            path: '/register',
           });
      }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的错误信息
  });