add tips

src/main.js

@@ -20,8 +20,9 @@ import 'vue-multiselect/dist/vue-multiselect.min.css';
 import vueWaves from './directive/waves';
 import vueSticky from './directive/sticky';
 import errLog from 'store/errLog';
-import './mock/index.js';  // 使用api请求时请将此行注释，不然将被mock拦截
+import './mock/index.js';  // 使用api请求时请将此行注释，不然将被mock拦截!!
 // import './styles/mixin.scss';
+import permission from 'store/permission';
 
 // register globally
 Vue.component('multiselect', Multiselect);
@@ -36,40 +37,58 @@ Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 });
 
+// permissiom judge
 function hasPermission(roles, permissionRoles) {
-  if (roles.indexOf('admin') >= 0) return true;
+  if (roles.indexOf('admin') >= 0) return true; // admin权限 直接通过
   return roles.some(role => permissionRoles.indexOf(role) >= 0)
 }
+
 // register global progress.
 const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd'];// 不重定向白名单
 router.beforeEach((to, from, next) => {
-  NProgress.start();
-  if (store.getters.token) {
+  NProgress.start(); // 开启Progress
+  if (store.getters.token) { // 判断是否有token
     if (to.path === '/login') {
       next({ path: '/' });
     } else {
-      if (to.meta && to.meta.role && store.getters.uid) {
-        if (hasPermission(store.getters.roles, to.meta.role)) {
-          next();
+      if (to.meta && to.meta.role) { // 判断即将进入的页面是否需要权限
+        if (store.getters.uid) { // 判断当前用户是否已拉去玩info信息
+          if (hasPermission(store.getters.roles, to.meta.role)) { // 判断权限
+            next(); // 有权限
           } else {
-          next('/401');
+            next('/401'); // 无权限
           }
+        } else { // 未拉去info信息
+          store.dispatch('GetInfo').then(() => { // 拉取info
+            permission.init({ // 初始化权限
+              roles: store.getters.roles,
+              router: router.options.routes
+            });
+            if (hasPermission(store.getters.roles, to.meta.role)) { // 判断权限
+              next();// 有权限
             } else {
+              next('/401');// 无权限
+            }
+          }).catch(err => {
+            console.log(err);
+          });
+        }
+      } else { // 页面不需要权限 直接进入
         next();
       }
     }
   } else {
-    if (whiteList.indexOf(to.path) !== -1) {
+    if (whiteList.indexOf(to.path) !== -1) { // 在免登入白名单，直接进入
       next()
     } else {
-      next('/login');
-      NProgress.done(); // 在hash模式下 改变手动改变hash 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
+      next('/login'); // 否则全部重定向到登录页
+      NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
     }
   }
 });
 
 router.afterEach(() => {
-  NProgress.done();
+  NProgress.done(); // 结束Progress
 });
 
 // window.onunhandledrejection = e => {

src/views/layout/Layout.vue

@@ -15,8 +15,6 @@
     import store from 'store';
     import router from 'router';
     import permission from 'store/permission';
-    // import { Loading } from 'element-ui';
-    // let loadingInstance;
     export default {
       name: 'layout',
       components: {
@@ -35,17 +33,13 @@
           next();
           return
         }
-
-        // loadingInstance = Loading.service({ fullscreen: true, text: '玩命加载中' });
         store.dispatch('GetInfo').then(() => {
           permission.init({
             roles: store.getters.roles,
             router: router.options.routes
           });
-        //   loadingInstance.close();
           next();
         }).catch(err => {
-        //   loadingInstance.close();
           console.log(err);
         });
       }