refactor: 加上 progress bar

frontend/package.json

@@ -33,7 +33,8 @@
     "json-bigint": "^1.0.0",
     "html2canvas": "^1.0.0-rc.7",
     "jspdf": "^2.1.1",
-    "yan-progress": "^1.0.3"
+    "yan-progress": "^1.0.3",
+    "nprogress": "^0.2.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",

frontend/src/business/permission.js

@@ -1,9 +1,12 @@
 import router from './components/common/router/router'
 import {TokenKey} from '@/common/js/constants';
 import {hasRolePermissions, hasRoles} from "@/common/js/utils";
-
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
 const whiteList = ['/login']; // no redirect whitelist
 
+NProgress.configure({showSpinner: false}) // NProgress Configuration
+
 export const permission = {
   inserted(el, binding) {
     checkRolePermission(el, binding, 'permission');
@@ -33,6 +36,8 @@ function checkRolePermission(el, binding, type) {
 }
 
 router.beforeEach(async (to, from, next) => {
+  // start progress bar
+  NProgress.start();
 
   // determine whether the user has logged in
   const user = JSON.parse(localStorage.getItem(TokenKey));
@@ -40,6 +45,7 @@ router.beforeEach(async (to, from, next) => {
   if (user) {
     if (to.path === '/login') {
       next({path: '/'});
+      NProgress.done(); // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } else {
       // const roles = user.roles.filter(r => r.id);
       // TODO 设置路由的权限
@@ -50,14 +56,16 @@ router.beforeEach(async (to, from, next) => {
 
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
-      next()
+      next();
     } else {
       // other pages that do not have permission to access are redirected to the login page.
-      next(`/login`)
+      next(`/login`);
+      NProgress.done();
     }
   }
 });
 
 router.afterEach(() => {
   // finish progress bar
+  NProgress.done();
 });