Axios HTTP拦截

http请求拦截及响应拦截

一般在发送请求给服务器时,会将用户的 token 一起发送给服务器,服务器根据用户的token判断用户身份是否有效

实现

http 请求拦截

在发送请求前将请求拦截,在每个请求的请求头中加入token

axios.interceptors.require.use(
    config => {
        if(store.state.token){
            config.headers.Authorization = store.state.token
        }
        return config
    },
    err => {
        return Promise.reject(error)
    }
)

http 响应拦截

在获取到服务器响应后,将响应拦截下来,如果存在401则重定向至登录页获取token

axios.interceptors.response.use(
    response => {
        return response
    },
    err => {
        if (err.response) {
            switch (err.response.status) {
                case 401:
                    router.replace({
                        path: '/user/login',
                        query: {redirect: router.currentRoute.fullPage}
                    })
            }
        }
        return Promise.reject(err.response.data)
    }
)

通过约定好的错误码的响应拦截器

axios.interceptors.response.use(
    response => {
        switch (response.data.code){
            case 200:
                break;
            case 401:
                router.replace({
                    path:'/user/login',
                    query: {redirect: router.currentRoute.fullPage}
                })
                break;
        }
        return response
    }
)

http请求拦截及响应拦截经常会与路由拦截配合使用

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 中午小宝睡觉了,大宝正躺在床上翻来覆去的,我在看文章,突然听门口有人叫,像是说卖膏药,膏药?我一听就来了兴趣,放下...
    红猪猪阅读 2,435评论 2 2
  • 只需一眼,心中再无他人。 简介:夏北一直觉得,他是正宗的纯爷们儿,却没想到遇见了林墨这个变数。虽然“天有不测风云”...
    铃兰不语阅读 3,304评论 0 0
  • 最近,《我不是药神》以零差评成了暑期档的爆款,直面“天价药”、“看病贵”这一当下中国的社会问题。 这些经典台词戳中...
    夏衍一个有温度的保险人阅读 4,705评论 0 0
  • 已经10点过了,一家长电话。满是担忧,听说娃儿没进到培优班。说实话,我觉得成功一半了。孩子现在的紧迫感,让孩儿巨大...
    湛湛露斯阳阅读 1,098评论 0 0