refactor: main

src/core/bootstrap.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import store from '@/store/'
+import {
+  ACCESS_TOKEN,
+  DEFAULT_COLOR,
+  DEFAULT_THEME,
+  DEFAULT_LAYOUT_MODE,
+  DEFAULT_COLOR_WEAK,
+  SIDEBAR_TYPE,
+  DEFAULT_FIXED_HEADER,
+  DEFAULT_FIXED_HEADER_HIDDEN,
+  DEFAULT_FIXED_SIDEMENU,
+  DEFAULT_CONTENT_WIDTH_TYPE
+} from '@/store/mutation-types'
+import { removeLoadingAnimate } from '@/utils/util'
+import config from '@/config/defaultSettings'
+
+export default function Initializer () {
+  store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
+  store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
+  store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
+  store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
+  store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
+  store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
+  store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
+  store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
+  store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
+  store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
+  // last step
+  removeLoadingAnimate('preloadingWrapper', 1500)
+}

src/core/use.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import VueStorage from 'vue-ls'
+import config from '@/config/defaultSettings'
+
+// base library
+import Antd from 'ant-design-vue'
+import Viser from 'viser-vue'
+import 'ant-design-vue/dist/antd.less'
+
+// ext library
+import VueClipboard from 'vue-clipboard2'
+import PermissionHelper from '@/utils/helper/permission'
+// import '@/components/use'
+
+VueClipboard.config.autoSetContainer = true
+
+Vue.use(Antd)
+Vue.use(Viser)
+
+Vue.use(VueStorage, config.storageOptions)
+Vue.use(VueClipboard)
+Vue.use(PermissionHelper)

src/main.js

@@ -1,63 +1,23 @@
-import Vue from 'vue'
-import App from './App.vue'
-import Storage from 'vue-ls'
-import router from './router'
-import store from './store/'
-
-import { VueAxios } from '@/utils/request'
-
-import Antd from 'ant-design-vue'
-import Viser from 'viser-vue'
-import 'ant-design-vue/dist/antd.less'  // or 'ant-design-vue/dist/antd.less'
-
-import VueClipboard from 'vue-clipboard2'
-import '@/permission' // permission control
-import '@/utils/filter' // base filter
-import PermissionHelper from '@/utils/helper/permission'
-import { removeLoadingAnimate } from '@/utils/util'
-
-import {
-  ACCESS_TOKEN,
-  DEFAULT_COLOR,
-  DEFAULT_THEME,
-  DEFAULT_LAYOUT_MODE,
-  DEFAULT_COLOR_WEAK,
-  SIDEBAR_TYPE,
-  DEFAULT_FIXED_HEADER,
-  DEFAULT_FIXED_HEADER_HIDDEN,
-  DEFAULT_FIXED_SIDEMENU,
-  DEFAULT_CONTENT_WIDTH_TYPE
-} from '@/store/mutation-types'
-import config from '@/defaultSettings'
-
-VueClipboard.config.autoSetContainer = true
-Vue.config.productionTip = false
-
-Vue.use(Storage, config.storageOptions)
-Vue.use(Antd)
-Vue.use(VueAxios, router)
-Vue.use(Viser)
-Vue.use(VueClipboard)
-Vue.use(PermissionHelper)
-
-new Vue({
-  router,
-  store,
-  created () {
-    store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
-    store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
-    store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
-    store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
-    store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
-    store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
-    store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
-    store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
-    store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
-    store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
-
-    console.log('.... created ()')
-
-    removeLoadingAnimate('preloadingWrapper')
-  },
-  render: h => h(App)
-}).$mount('#app')
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store/'
+import { VueAxios } from '@/utils/request' // axios 不建议引入到 Vue 原型链上
+
+import './core/use'
+import bootstrap from './core/bootstrap'
+import '@/permission' // permission control
+import '@/utils/filter' // global filter
+
+Vue.config.productionTip = false
+
+Vue.use(VueAxios, router)
+
+new Vue({
+  router,
+  store,
+  created () {
+    bootstrap()
+  },
+  render: h => h(App)
+}).$mount('#app')

src/permission.js

@@ -1,102 +1,111 @@
-import Vue from 'vue'
-import router from './router'
-import store from './store'
-
-import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css' // progress bar style
-import notification from 'ant-design-vue/es/notification'
-import { ACCESS_TOKEN } from '@/store/mutation-types'
-
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
-
-const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist
-
-router.beforeEach((to, from, next) => {
-  NProgress.start() // start progress bar
-
-  if (Vue.ls.get(ACCESS_TOKEN)) {
-    /* has token */
-    if (to.path === '/user/login') {
-      next({ path: '/dashboard/workplace' })
-      NProgress.done()
-    } else {
-      if (store.getters.roles.length === 0) {
-        store
-          .dispatch('GetInfo')
-          .then(res => {
-            const roles = res.result && res.result.role
-            store.dispatch('GenerateRoutes', { roles }).then(() => {
-              // 根据roles权限生成可访问的路由表
-              // 动态添加可访问路由表
-              router.addRoutes(store.getters.addRouters)
-              const redirect = decodeURIComponent(from.query.redirect || to.path)
-              if (to.path === redirect) {
-                // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
-                next({ ...to, replace: true })
-              } else {
-                // 跳转到目的路由
-                next({ path: redirect })
-              }
-            })
-          })
-          .catch(() => {
-            notification.error({
-              message: '错误',
-              description: '请求用户信息失败，请重试'
-            })
-            store.dispatch('Logout').then(() => {
-              next({ path: '/user/login', query: { redirect: to.fullPath } })
-            })
-          })
-      } else {
-        next()
-      }
-    }
-  } else {
-    if (whiteList.includes(to.name)) {
-      // 在免登录白名单，直接进入
-      next()
-    } else {
-      next({ path: '/user/login', query: { redirect: to.fullPath } })
-      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
-    }
-  }
-})
-
-router.afterEach(() => {
-  NProgress.done() // finish progress bar
-})
-
-
-
-
-/**Action 权限指令**/
-const action = Vue.directive('action', {
-  bind: function (el, binding, vnode) {
-    const actionName = binding.arg
-    const roles = store.getters.roles
-    const permissionId = vnode.context.$route.meta.permission
-    let actions = []
-    roles.permissions.forEach(p => {
-      if (p.permissionId != permissionId) {
-        return
-      }
-      actions = p.actionList
-    })
-    if (actions.indexOf(actionName) < 0) {
-      setTimeout(() => {
-        if(el.parentNode == null){
-          el.style.display = 'none'
-        }
-        else{
-            el.parentNode.removeChild(el)
-        }
-      }, 10)
-
-    }
-  }
-})
-
-export {
-  action
-}
+import Vue from 'vue'
+import router from './router'
+import store from './store'
+
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+import notification from 'ant-design-vue/es/notification'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist
+
+router.beforeEach((to, from, next) => {
+  NProgress.start() // start progress bar
+
+  if (Vue.ls.get(ACCESS_TOKEN)) {
+    /* has token */
+    if (to.path === '/user/login') {
+      next({ path: '/dashboard/workplace' })
+      NProgress.done()
+    } else {
+      if (store.getters.roles.length === 0) {
+        store
+          .dispatch('GetInfo')
+          .then(res => {
+            const roles = res.result && res.result.role
+            store.dispatch('GenerateRoutes', { roles }).then(() => {
+              // 根据roles权限生成可访问的路由表
+              // 动态添加可访问路由表
+              router.addRoutes(store.getters.addRouters)
+              const redirect = decodeURIComponent(from.query.redirect || to.path)
+              if (to.path === redirect) {
+                // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
+                next({ ...to, replace: true })
+              } else {
+                // 跳转到目的路由
+                next({ path: redirect })
+              }
+            })
+          })
+          .catch(() => {
+            notification.error({
+              message: '错误',
+              description: '请求用户信息失败，请重试'
+            })
+            store.dispatch('Logout').then(() => {
+              next({ path: '/user/login', query: { redirect: to.fullPath } })
+            })
+          })
+      } else {
+        next()
+      }
+    }
+  } else {
+    if (whiteList.includes(to.name)) {
+      // 在免登录白名单，直接进入
+      next()
+    } else {
+      next({ path: '/user/login', query: { redirect: to.fullPath } })
+      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
+    }
+  }
+})
+
+router.afterEach(() => {
+  NProgress.done() // finish progress bar
+})
+
+/**
+ * Action 权限指令
+ * 指令用法：
+ *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
+ *    <a-button v-action:add >添加用户</a-button>
+ *    <a-button v-action:delete>删除用户</a-button>
+ *    <a v-action:edit @click="edit(record)">修改</a>
+ *
+ *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
+ *  - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
+ *
+ *  @see https://github.com/sendya/ant-design-pro-vue/pull/53
+ */
+const action = Vue.directive('action', {
+  bind: function (el, binding, vnode) {
+    const actionName = binding.arg
+    const roles = store.getters.roles
+    const permissionId = vnode.context.$route.meta.permission
+    let actions = []
+    roles.permissions.forEach(p => {
+      if (p.permissionId != permissionId) {
+        return
+      }
+      actions = p.actionList
+    })
+    if (actions.indexOf(actionName) < 0) {
+      setTimeout(() => {
+        if(el.parentNode == null){
+          el.style.display = 'none'
+        }
+        else{
+            el.parentNode.removeChild(el)
+        }
+      }, 10)
+
+    }
+  }
+})
+
+export {
+  action
+}