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

这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战

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

项目需求：用自定义的 .gif 图标实现全局 loading 效果；为避免在每个页面手动添加，且简单高效的实现，经查阅资料，最终采用了 vue 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;
}

如果只是想要修改loading logo的颜色，使用如下css，写入App.vue中(类似的方法也可以)

.el-loading-spinner .path{
  stroke:#ed4014!important;
}
.el-loading-spinner .el-loading-text{
  color: #ed4014!important;
}

三、在拦截器中跳转页面

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

1.vuex方式

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

2.直接跳转

location.href = 'login url';