Encapsulation API, request interception, response interception, authentication timeliness

encapsulation API

API encapsulation , Create a new one .js file

import axios from 'axios'
// var baseurl = 'http://***.***.**.**:8080'
var baseurl = sessionStorage.getItem('baseurl_4')
// var token = sessionStorage.getItem('token')
//  Set alert ：post Method 
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 Intercept ,response Intercept , Timeliness of authentication

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')  //  Sign in  
sessionStorage.setItem('baseurl_4','http://192.168.**.**:8080')  //  register 
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 Interceptor , Used to add token
axios.interceptors.request.use( config => {
    
  let token = sessionStorage.getItem('token');
  if(token) {
       //request  Interception adds token
    config.headers.common['Authorization'] = token
  }
  return config
}),error => {
    
  Promise.reject(error)
}

//  Response interceptors 
axios.interceptors.response.use(res => {
    
//  There are two kinds of interface response ：res.data.code  and  res.status
  const code = res.data.code
  const status = res.status;
  // Get error messages 
  const msg = res.data.msg || res.error || res.data.res;
  //  Get error messages 
  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 = ' Interface connection exception '
    console.log(message);
    Dialog.alert({
    
      message: ' Interface access exception , Please exit and try again '
    }).then( () => {
    
        sessionStorage.removeItem('token')
        Toast.loading({
    
          message: ' Jumping ...',
          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: ' Login validation expiration , Please login again '
    }).then( () => {
    
      sessionStorage.removeItem('token')
      Toast.loading({
    
        message: ' Jumping ...',
        forbidClick: true,
        loadingType: 'spinner',
      },800);
      // setTimeout(() => {
    
        // router.push('/Login');
        router.push({
    
          path: '/Login',
          query: {
     id : '2'}
        })
      // },1200)
      setTimeout(() => {
    
        window.location.reload();
      }, 500)
    })
    message = ' system interface ' + message.substr(message.length - 3) + ' abnormal ';
    console.log(message);
  }
  return Promise.reject(error)
})

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