读取中状态

src/permission.js

@@ -67,10 +67,16 @@
 import router from '@/router'
 import store from '@/store'
 
+// 引入一份进度条插件
+import NProgress from 'nprogress'
+// 引入进度条样式
+import 'nprogress/nprogress.css'
+
 const whiteList = ['/login', '/404']
 
 // 全局前置路由守卫
 router.beforeEach((to, from, next) => {
+  NProgress.start()
   // 判断是否有token
   if (store.getters.token) { // 有token
     if (to.path === '/login') { // 在登录页
@@ -83,7 +89,15 @@ router.beforeEach((to, from, next) => {
       next()
     } else {
       next('/login')
-      console.log('aaa')
     }
   }
+
+  // 主动结束进度条
+  NProgress.done()
+})
+
+// 全局后置路由守卫
+router.afterEach(() => {
+  // 结束进度条
+  NProgress.done()
 })

src/views/login/index.vue

@@ -127,6 +127,7 @@ export default {
       })
     },
     async handleLogin() {
+      this.loading = true
       try {
         await this.$refs.loginForm.validate() // 数据校验
         // await this.$store.dispatch('user/login', this.loginForm) // 必须加await
@@ -136,6 +137,8 @@ export default {
       } catch (error) {
         console.log('捕获错误')
         console.log(error)
+      } finally {
+        this.loading = false
       }
     }
   }