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)
}