美文网首页
Axios HTTP拦截

Axios HTTP拦截

作者: 骑着母猪去买菜 | 来源:发表于2018-09-12 09:06 被阅读0次

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请求拦截及响应拦截经常会与路由拦截配合使用

相关文章

网友评论

      本文标题:Axios HTTP拦截

      本文链接:https://www.haomeiwen.com/subject/ewrmgftx.html