处理 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()
})