add nprogress

guoranred

2020-09-14 e414f89e271c5d2758701a35ee6ef7685f979072

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 @@
  if (!loginIgnore.includes(to) && !checkAuthorization()) {
    message.warning('登录已失效，请重新登录')
    next({path: '/login'})
    NProgress.done()
  } else {
    next()
  }
@@ -33,6 +48,7 @@
  if (!hasAuthority(to, permissions, roles)) {
    message.warning(`对不起，您无权访问页面: ${to.fullPath}，请联系管理员`)
    next({path: '/403'})
    NProgress.done()
  } else {
    next()
  }
@@ -61,7 +77,18 @@
  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

New file
@@ -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); }
}