http請求攔截及響應(yīng)攔截

一般在發(fā)送請求給服務(wù)器時(shí)，會(huì)將用戶的 token 一起發(fā)送給服務(wù)器，服務(wù)器根據(jù)用戶的token判斷用戶身份是否有效

實(shí)現(xiàn)

http 請求攔截

在發(fā)送請求前將請求攔截，在每個(gè)請求的請求頭中加入token

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

http 響應(yīng)攔截

在獲取到服務(wù)器響應(yīng)后，將響應(yīng)攔截下來，如果存在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)
    }
)

通過約定好的錯(cuò)誤碼的響應(yīng)攔截器

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請求攔截及響應(yīng)攔截經(jīng)常會(huì)與路由攔截配合使用