vue登录拦截器

114 阅读1分钟

request.js拦截器文件

import axios from 'axios'
import {Message, MessageBox} from 'element-ui'
import store from '@/store'

const serves = axios.create({
    baseURL: process.env.BASE_API,
    timeout: 50000
})

// 设置请求发送之前的拦截器
serves.interceptors.request.use(config => {
    const token = store.getters.token
    if (token) {
        config.headers['X-Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
    }

    // 设置发送之前数据需要做什么处理 
    return config
}, err => {
    console.log(err)
    Promise.reject(err)
})

// 设置请求接受拦截器
serves.interceptors.response.use(response => {

    // 设置接受数据之后,做什么处理
    const res = response.data

    if (!res.code || res.code == 200) {
        // console.log("res", res)
        return res
    } else {
        // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
        if (res.code === 401) {
            MessageBox.confirm('登录超时, 您可以点击取消停留在当前页面,或者重新登录', '确认退出', {
                confirmButtonText: '重新登录',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                store.dispatch('LogOut').then(() => {
                    localStorage.clear()
                    location.reload()
                })
            })
        } else {
            Message({
                message: res.message || 'Error',
                type: 'error',
                duration: 5 * 1000
            })
        }
        return Promise.reject(new Error(res.message || 'Error'))
    }

}, err => {
    console.log(err.response)
    // 判断请求异常信息中是否含有超时timeout字符串
    if (err.message.includes('timeout')) {
        console.log('错误回调', err)
        Message.error('网络超时')
    }
    if (err.message.includes('Network Error')) {
        console.log('错误回调', err)
        Message.error('服务端未启动,或网络连接错误')
    }
    if (err.response.status == 404) {
        Message.error('服务端未启动,或网络连接错误')
    }
    if (err.response.status == 401) {
        MessageBox.confirm('登录超时, 您可以点击取消停留在当前页面,或者重新登录', '确认退出', {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            store.dispatch('LogOut').then(() => {
                location.reload()
            })
        })
    }
    return Promise.reject(err)
})

// 将serves抛出去
export default serves

template.js接口文件

import request from '@/utils/request'
export default {
  /*资源库明细-分页列表查询*/
  sourcelist(params) {
    return request({
      url: `/template/libraryDetails/sourcelist`,
      method: 'get',
      params
    })
  },

}