在拦截器中跳转页面和全局的loading且修改loading的图标

一般axios请求会进行封装，封装的文件中会对拦截器、错误码、全局的loading等做相应的处理。

一、全局loading的实现如下：

在request拦截器中添加loading的配置

import { Loading } from 'element-ui'
let loadinginstace;
// request拦截器
service.interceptors.request.use(
  config => {
    loadinginstace = Loading.service({
      lock: true,
      // text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(250, 250, 250, 0.8)',
      customClass: "osloading",
      fullscreen: true
    })
    
    if (getToken()) {
      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
  },
  error => {
    loadinginstace.close()
    console.log(error);
    Promise.reject(error)
  }
);

然后在响应拦截器中关掉loading，关掉loading的代码为loadinginstace.close()，但是存在一个问题是这样如果请求比较快，就会出现闪烁。因此，可以添加一个setTimeout来延迟这个效果，如下添加了一个200ms的延时，这样就可以解决闪烁问题。

// 响应拦截器
service.interceptors.response.use(res => {
setTimeout(() => {
      loadinginstace.close()
    }, 200)
})

二、修改loading的图标

loadinginstace = Loading.service({
      lock: true,
      // text: 'Loading',
      spinner: 'iconfont iconjiazai animal',
      background: 'rgba(250, 250, 250, 0.8)',
      customClass: "osloading",
      fullscreen: true
    })

.animal{
    display: block;
    animation: rotate 3s linear infinite;
}

三、在拦截器中跳转页面

在拦截器中根据不同的错误码，有时候需要跳转到不同的界面，需要在拦截器response中跳转页面，跳转有以下两种方式。

1.vuex方式

window.g_app._store.dispatch({
  type: 'login/logout',
});

2.直接跳转

location.href = 'login url';