feat(router): add permission module and NProgress

Author: lbwa

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "element-ui": "^2.4.5",
     "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/main.js

@@ -1,8 +1,9 @@
 import Vue from 'vue'
+import 'normalize.css'
 import App from './App.vue'
-import router from './router'
+// Shouldn't use Router instance directly without 'PERMISSION/index' processing.
+import router from './permission'
 import store from './store'
-import 'normalize.css'
 import './plugins/element.js'
 
 Vue.config.productionTip = false

src/permission/index.js

@@ -0,0 +1,16 @@
+import router from 'ROUTER'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+NProgress.configure({ showSpinner: false })
+
+router.beforeEach((to, from, next) => {
+  NProgress.start()
+  next()
+})
+
+router.afterEach((to, from) => {
+  NProgress.done()
+})
+
+export default router

src/router/index.js

@@ -4,6 +4,11 @@ import { constantComponents } from './components'
 
 Vue.use(Router)
 
+/**
+ * ! NOTICE
+ * This router instance should not be added directly without
+ * `PERMISSION/index` processing.
+ */
 export default new Router({
   routes: [
     {

yarn.lock

@@ -4791,6 +4791,10 @@ npm-run-path@^2.0.0:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "http://registry.npm.taobao.org/nprogress/download/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+
 nth-check@^1.0.2, nth-check@~1.0.1:
   version "1.0.2"
   resolved "http://registry.npm.taobao.org/nth-check/download/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"