vue+axios 前端实现登录拦截（http拦截）

 

拦截器

首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多.

这个项目我引入了element ui框架,所以我是结合element中loading和message组件来处理的.我们可以单独建立一个http的js文件处理axios,再到main.js中引入.

/**
 * http配置
 */
// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import { getSession } from '@/utils'
import { Spin, Message } from 'iview'

axios.prototype.$spin = Spin;
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
axios.interceptors.request.use(config => {
    Spin.show()
    config.headers['authorization'] = getSession('authorization') === null ? "" : getSession('authorization')
    return config
}, error => {
    Spin.hide()
    Message.error({
        content: '加载超时'
    })
    return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
    Spin.hide()
    return data
}, error => {
    Spin.hide()
    switch (error.response.status) {
        case 401:
            Message.error({
                content: '没有权限'
            });
            break
        case 404:
            Message.error({
                content: '页面丢失了'
            });
            break
        case 500:
            Message.error({
                content: '服务器请求超时'
            });
            break
        default:
            Message.error({
                content: '未知错误！'
            });
    }
    return Promise.reject(error)
})

export default axios　　

获取  authorization  的函数

export function getSession(key) {
    return window.sessionStorage.getItem(key)
}

export function setSession(key, val) {
    window.sessionStorage.setItem(key, val)
}