add nprogress

package.json

@@ -29,7 +29,8 @@
     "vue-i18n": "^8.18.2",
     "vue-router": "^3.3.4",
     "vuedraggable": "^2.23.2",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "nprogress": "^0.2.0"
   },
   "devDependencies": {
     "@ant-design/colors": "^4.0.1",

src/router/guards.js

@@ -1,7 +1,21 @@
 import {hasAuthority} from '@/utils/authority-utils'
 import {loginIgnore} from '@/router/index'
 import {checkAuthorization} from '@/utils/request'
+import NProgress from 'nprogress'
 
+NProgress.configure({ showSpinner: false })
+
+/**
+ * 前置守卫
+ * @param to
+ * @param form
+ * @param next
+ */
+const beforeGuard = (to, from, next) => {
+  // start progress bar
+  NProgress.start()
+  next()
+}
 /**
  * 登录守卫
  * @param to
@@ -14,6 +28,7 @@ const loginGuard = (to, from, next, options) => {
   if (!loginIgnore.includes(to) && !checkAuthorization()) {
     message.warning('登录已失效，请重新登录')
     next({path: '/login'})
+    NProgress.done()
   } else {
     next()
   }
@@ -33,6 +48,7 @@ const authorityGuard = (to, from, next, options) => {
   if (!hasAuthority(to, permissions, roles)) {
     message.warning(`对不起，您无权访问页面: ${to.fullPath}，请联系管理员`)
     next({path: '/403'})
+    NProgress.done()
   } else {
     next()
   }
@@ -61,7 +77,18 @@ const redirectGuard = (to, from, next, options) => {
   next()
 }
 
+/**
+ * 后置守卫
+ * @param to
+ * @param form
+ * @param options
+ */
+const afterGuard = () => {
+  // finish progress bar
+  NProgress.done()
+}
+
 export default {
-  beforeEach: [loginGuard, authorityGuard, redirectGuard],
-  afterEach: []
+  beforeEach: [beforeGuard, loginGuard, authorityGuard, redirectGuard],
+  afterEach: [afterGuard]
 }

src/theme/default/index.less

@@ -1,2 +1,3 @@
 @import "color";
 @import "style";
+@import "nprogress";

src/theme/default/nprogress.less

@@ -0,0 +1,76 @@
+@import '~ant-design-vue/lib/style/themes/default';
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: @primary-color;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: @primary-color;
+  border-left-color: @primary-color;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+