简单的axios拦截器

小更新一下吧。:bouquet::bouquet::bouquet:某些时候我们是需要在请求接口的时候,做一下拦截器,对请求的结果做一下统一的处理及响应。不需要钱每个地方都做重复的工作

比如:一些登录授权、账号绑定解绑页面、用户购买页面其实都是需要用户传递token 或者openid 或者 其他一些固定的参数需要做用户验证的

当用户当前账户长时间不登录 过期的时候可以强制要求用户重新登录授权。

// request拦截器
service.interceptors.request.use(config => {

    // 请求header中携带信息
    //封装一个方法获取当前用户的token
    //具体怎么获取token 或者openid 等信息根据自己的业务决定
    
    config.headers['Authorization'] = getUserInfo().token;
    return config
}, error => {

    // Do something with request error
    //这里使用一个UI组件的toast组件给予用户提示。
    
    toast({ type: "fail", message: "网络请求出错" });
    if (typeof error == 'object') {
        onSensors("requestError", { error: error.toString() });
    }
    return Promise.reject(error)
})

复制代码
// respone拦截器 处理普通的响应错误状态  并予以提示
service.interceptors.response.use(response => {
    if (response.status >= 200 && response.status < 300 && response.data && response.headers) {
        // success
        return { res: response.data, headers: response.headers }
    } else {
        toast({ type: "fail", message: "httpStatusCode:" + response.status });
    }
}, error => {
    if (error.response && error.response.status && error.response.status == 401) {
        removeCookies();
        checkLogin(() => {
            //do something when cookie is exist
        });
        return;
    }
    toast({ type: "fail", message: "网络响应错误" });
    onSensors("responseError", { error: error.toString() });
    return Promise.reject(error)
})
复制代码
//描述  捕获401  http response 拦截器, 并对返回的errcode 进行判断,如果是过期的话重新唤起授权

axios.interceptors.response.use(
  response => {
    const res = response.data
    if (res.errcode === xxx || res.errCode === xxxx) {
      window.location.href = `重新授权登录接口拼接回调`
    } else {
      return response
    }
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          window.location.href = `重新授权登录接口拼接回调`
      }
    }
    return Promise.reject(error.response.data) // 返回接口返回的错误信息
  });

复制代码
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章