封装API，request拦截，response拦截，身份验证时效性

封装API

API封装，新建一个.js文件

import axios from 'axios'
// var baseurl = 'http://***.***.**.**:8080'
var baseurl = sessionStorage.getItem('baseurl_4')
// var token = sessionStorage.getItem('token')
// 设置预警：post方法
export const PostWarn = function PostWarn(params) {
    
    return new Promise((resolve, reject) => {
    
        axios.post(baseurl+'/user/user_url_api/',params).then(res => {
    
            resolve(res)
        }).catch(err => {
    
            console.log(err);
            reject(err)
        })
    })
}

request拦截，response拦截，身份验证时效性

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import vant from 'vant'
import 'vant/lib/index.css';
import {
     Dialog, Toast } from "vant";

Vue.config.productionTip = false
Vue.use(vant)
Vue.prototype.$http = axios
sessionStorage.setItem('baseurl_3','http://192.168.**.**:8090')  // 登录 
sessionStorage.setItem('baseurl_4','http://192.168.**.**:8080')  // 注册
const base_url = ''
axios.defaults.baseURL = base_url
// axios.defaults.timeout = 1000 * 10
localStorage.setItem('base_url', base_url)
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'

// request拦截器，用于加token
axios.interceptors.request.use( config => {
    
  let token = sessionStorage.getItem('token');
  if(token) {
       //request 拦截给所有的请求头加token
    config.headers.common['Authorization'] = token
  }
  return config
}),error => {
    
  Promise.reject(error)
}

// 响应拦截器
axios.interceptors.response.use(res => {
    
// 接口响应的情况有两种：res.data.code 和 res.status
  const code = res.data.code
  const status = res.status;
  //获取错误信息
  const msg = res.data.msg || res.error || res.data.res;
  // 获取错误信息
  const rec = res.data.code;
  console.log(rec,msg);
  if(code == 500 || status == 500) {
    
      console.log(rec,msg);
      return Promise.reject(new Error(res))
  }else{
    
      return res
  }
},error => {
    
  let {
     message } = error;
  if(message == 'Network Error') {
    
    message = '接口连接异常'
    console.log(message);
    Dialog.alert({
    
      message: '接口访问异常，请退出重试'
    }).then( () => {
    
        sessionStorage.removeItem('token')
        Toast.loading({
    
          message: '跳转中...',
          forbidClick: true,
          loadingType: 'spinner',
        },800);
        // setTimeout(() => {
    
        // router.push('/Login');
          router.push({
    
            path: '/Login',
            query: {
     id : '2'}
          })
        // },1200)
        setTimeout(() => {
    
          window.location.reload();
        }, 500)
    })
  }else if(message.includes('Request failed with status code')) {
    
    Dialog.alert({
    
      message: '登录验证时效过期，请重新登录'
    }).then( () => {
    
      sessionStorage.removeItem('token')
      Toast.loading({
    
        message: '跳转中...',
        forbidClick: true,
        loadingType: 'spinner',
      },800);
      // setTimeout(() => {
    
        // router.push('/Login');
        router.push({
    
          path: '/Login',
          query: {
     id : '2'}
        })
      // },1200)
      setTimeout(() => {
    
        window.location.reload();
      }, 500)
    })
    message = '系统接口' + message.substr(message.length - 3) + '异常';
    console.log(message);
  }
  return Promise.reject(error)
})

new Vue({
    
  router,
  store,
  render: h => h(App)
}).$mount('#app')