处理 token 过期跳回登录页页面依然处于 loading 状态问题

处理 token 过期跳回登录页页面依然处于 loading 状态问题

产品提出了一个需求，他们希望所有接口发送请求获取数据时页面都要处于 loading 状态，只有请求成功才能关闭 loading 状态，也就是说请求失败则不关闭 loading 状态。

以上需求好办，我们只需要在请求前调用 Element UI 的 Loading 组件，await 后关闭 loading 状态即可。看似顺风顺水，但是一旦 token 失效，await 后的代码无法执行，loading 状态无法关闭，页面重定向到登录页后，登录页就被一个 Loading 遮罩层挡住了，此时我们就要解决这个问题。

实现思路：由于 token 失效后我们一般都会重定向到登录页，所以我们只需要在路由后置守卫中关闭掉 loading 状态即可。

方式一：调用 Vue 原型上的 $loading 进行关闭

// src\permission.js 路由守卫
import router from './router'
import Vue from 'vue'

router.afterEach(() => {
  Vue.prototype.$loading(
    {
      lock: true,
      text: '',
      background: 'rgba(0, 0, 0, 0)'
    }
  ).close()
})

方式二：创建 Loading 实例进行关闭

// src\permission.js 路由守卫
import router from './router'
import { Loading } from 'element-ui'

router.afterEach(() => {
  Loading.service({ fullscreen: true }).close()
})