Skip to content

Commit 65da551

Browse files
sendyasendya
committed
refactor: main
1 parent 78f57e9 commit 65da551

File tree

5 files changed

+187
-165
lines changed

5 files changed

+187
-165
lines changed

‎src/defaultSettings.js renamed to ‎src/config/defaultSettings.js

File renamed without changes.

‎src/core/bootstrap.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Vue from 'vue'
2+
import store from '@/store/'
3+
import {
4+
ACCESS_TOKEN,
5+
DEFAULT_COLOR,
6+
DEFAULT_THEME,
7+
DEFAULT_LAYOUT_MODE,
8+
DEFAULT_COLOR_WEAK,
9+
SIDEBAR_TYPE,
10+
DEFAULT_FIXED_HEADER,
11+
DEFAULT_FIXED_HEADER_HIDDEN,
12+
DEFAULT_FIXED_SIDEMENU,
13+
DEFAULT_CONTENT_WIDTH_TYPE
14+
} from '@/store/mutation-types'
15+
import { removeLoadingAnimate } from '@/utils/util'
16+
import config from '@/config/defaultSettings'
17+
18+
export default function Initializer () {
19+
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
20+
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
21+
store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
22+
store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
23+
store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
24+
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
25+
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
26+
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
27+
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
28+
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
29+
// last step
30+
removeLoadingAnimate('preloadingWrapper', 1500)
31+
}

‎src/core/use.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Vue from 'vue'
2+
import VueStorage from 'vue-ls'
3+
import config from '@/config/defaultSettings'
4+
5+
// base library
6+
import Antd from 'ant-design-vue'
7+
import Viser from 'viser-vue'
8+
import 'ant-design-vue/dist/antd.less'
9+
10+
// ext library
11+
import VueClipboard from 'vue-clipboard2'
12+
import PermissionHelper from '@/utils/helper/permission'
13+
// import '@/components/use'
14+
15+
VueClipboard.config.autoSetContainer = true
16+
17+
Vue.use(Antd)
18+
Vue.use(Viser)
19+
20+
Vue.use(VueStorage, config.storageOptions)
21+
Vue.use(VueClipboard)
22+
Vue.use(PermissionHelper)

‎src/main.js

Lines changed: 23 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,23 @@
1-
import Vue from 'vue'
2-
import App from './App.vue'
3-
import Storage from 'vue-ls'
4-
import router from './router'
5-
import store from './store/'
6-
7-
import { VueAxios } from '@/utils/request'
8-
9-
import Antd from 'ant-design-vue'
10-
import Viser from 'viser-vue'
11-
import 'ant-design-vue/dist/antd.less' // or 'ant-design-vue/dist/antd.less'
12-
13-
import VueClipboard from 'vue-clipboard2'
14-
import '@/permission' // permission control
15-
import '@/utils/filter' // base filter
16-
import PermissionHelper from '@/utils/helper/permission'
17-
import { removeLoadingAnimate } from '@/utils/util'
18-
19-
import {
20-
ACCESS_TOKEN,
21-
DEFAULT_COLOR,
22-
DEFAULT_THEME,
23-
DEFAULT_LAYOUT_MODE,
24-
DEFAULT_COLOR_WEAK,
25-
SIDEBAR_TYPE,
26-
DEFAULT_FIXED_HEADER,
27-
DEFAULT_FIXED_HEADER_HIDDEN,
28-
DEFAULT_FIXED_SIDEMENU,
29-
DEFAULT_CONTENT_WIDTH_TYPE
30-
} from '@/store/mutation-types'
31-
import config from '@/defaultSettings'
32-
33-
VueClipboard.config.autoSetContainer = true
34-
Vue.config.productionTip = false
35-
36-
Vue.use(Storage, config.storageOptions)
37-
Vue.use(Antd)
38-
Vue.use(VueAxios, router)
39-
Vue.use(Viser)
40-
Vue.use(VueClipboard)
41-
Vue.use(PermissionHelper)
42-
43-
new Vue({
44-
router,
45-
store,
46-
created () {
47-
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
48-
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
49-
store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
50-
store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
51-
store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
52-
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
53-
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
54-
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
55-
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
56-
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
57-
58-
console.log('.... created ()')
59-
60-
removeLoadingAnimate('preloadingWrapper')
61-
},
62-
render: h => h(App)
63-
}).$mount('#app')
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import router from './router'
4+
import store from './store/'
5+
import { VueAxios } from '@/utils/request' // axios 不建议引入到 Vue 原型链上
6+
7+
import './core/use'
8+
import bootstrap from './core/bootstrap'
9+
import '@/permission' // permission control
10+
import '@/utils/filter' // global filter
11+
12+
Vue.config.productionTip = false
13+
14+
Vue.use(VueAxios, router)
15+
16+
new Vue({
17+
router,
18+
store,
19+
created () {
20+
bootstrap()
21+
},
22+
render: h => h(App)
23+
}).$mount('#app')

‎src/permission.js

Lines changed: 111 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,111 @@
1-
import Vue from 'vue'
2-
import router from './router'
3-
import store from './store'
4-
5-
import NProgress from 'nprogress' // progress bar
6-
import 'nprogress/nprogress.css' // progress bar style
7-
import notification from 'ant-design-vue/es/notification'
8-
import { ACCESS_TOKEN } from '@/store/mutation-types'
9-
10-
NProgress.configure({ showSpinner: false }) // NProgress Configuration
11-
12-
const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist
13-
14-
router.beforeEach((to, from, next) => {
15-
NProgress.start() // start progress bar
16-
17-
if (Vue.ls.get(ACCESS_TOKEN)) {
18-
/* has token */
19-
if (to.path === '/user/login') {
20-
next({ path: '/dashboard/workplace' })
21-
NProgress.done()
22-
} else {
23-
if (store.getters.roles.length === 0) {
24-
store
25-
.dispatch('GetInfo')
26-
.then(res => {
27-
const roles = res.result && res.result.role
28-
store.dispatch('GenerateRoutes', { roles }).then(() => {
29-
// 根据roles权限生成可访问的路由表
30-
// 动态添加可访问路由表
31-
router.addRoutes(store.getters.addRouters)
32-
const redirect = decodeURIComponent(from.query.redirect || to.path)
33-
if (to.path === redirect) {
34-
// hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
35-
next({ ...to, replace: true })
36-
} else {
37-
// 跳转到目的路由
38-
next({ path: redirect })
39-
}
40-
})
41-
})
42-
.catch(() => {
43-
notification.error({
44-
message: '错误',
45-
description: '请求用户信息失败，请重试'
46-
})
47-
store.dispatch('Logout').then(() => {
48-
next({ path: '/user/login', query: { redirect: to.fullPath } })
49-
})
50-
})
51-
} else {
52-
next()
53-
}
54-
}
55-
} else {
56-
if (whiteList.includes(to.name)) {
57-
// 在免登录白名单，直接进入
58-
next()
59-
} else {
60-
next({ path: '/user/login', query: { redirect: to.fullPath } })
61-
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
62-
}
63-
}
64-
})
65-
66-
router.afterEach(() => {
67-
NProgress.done() // finish progress bar
68-
})
69-
70-
71-
72-
73-
/**Action 权限指令**/
74-
const action = Vue.directive('action', {
75-
bind: function (el, binding, vnode) {
76-
const actionName = binding.arg
77-
const roles = store.getters.roles
78-
const permissionId = vnode.context.$route.meta.permission
79-
let actions = []
80-
roles.permissions.forEach(p => {
81-
if (p.permissionId != permissionId) {
82-
return
83-
}
84-
actions = p.actionList
85-
})
86-
if (actions.indexOf(actionName) < 0) {
87-
setTimeout(() => {
88-
if(el.parentNode == null){
89-
el.style.display = 'none'
90-
}
91-
else{
92-
el.parentNode.removeChild(el)
93-
}
94-
}, 10)
95-
96-
}
97-
}
98-
})
99-
100-
export {
101-
action
102-
}
1+
import Vue from 'vue'
2+
import router from './router'
3+
import store from './store'
4+
5+
import NProgress from 'nprogress' // progress bar
6+
import 'nprogress/nprogress.css' // progress bar style
7+
import notification from 'ant-design-vue/es/notification'
8+
import { ACCESS_TOKEN } from '@/store/mutation-types'
9+
10+
NProgress.configure({ showSpinner: false }) // NProgress Configuration
11+
12+
const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist
13+
14+
router.beforeEach((to, from, next) => {
15+
NProgress.start() // start progress bar
16+
17+
if (Vue.ls.get(ACCESS_TOKEN)) {
18+
/* has token */
19+
if (to.path === '/user/login') {
20+
next({ path: '/dashboard/workplace' })
21+
NProgress.done()
22+
} else {
23+
if (store.getters.roles.length === 0) {
24+
store
25+
.dispatch('GetInfo')
26+
.then(res => {
27+
const roles = res.result && res.result.role
28+
store.dispatch('GenerateRoutes', { roles }).then(() => {
29+
// 根据roles权限生成可访问的路由表
30+
// 动态添加可访问路由表
31+
router.addRoutes(store.getters.addRouters)
32+
const redirect = decodeURIComponent(from.query.redirect || to.path)
33+
if (to.path === redirect) {
34+
// hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
35+
next({ ...to, replace: true })
36+
} else {
37+
// 跳转到目的路由
38+
next({ path: redirect })
39+
}
40+
})
41+
})
42+
.catch(() => {
43+
notification.error({
44+
message: '错误',
45+
description: '请求用户信息失败，请重试'
46+
})
47+
store.dispatch('Logout').then(() => {
48+
next({ path: '/user/login', query: { redirect: to.fullPath } })
49+
})
50+
})
51+
} else {
52+
next()
53+
}
54+
}
55+
} else {
56+
if (whiteList.includes(to.name)) {
57+
// 在免登录白名单，直接进入
58+
next()
59+
} else {
60+
next({ path: '/user/login', query: { redirect: to.fullPath } })
61+
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
62+
}
63+
}
64+
})
65+
66+
router.afterEach(() => {
67+
NProgress.done() // finish progress bar
68+
})
69+
70+
/**
71+
* Action 权限指令
72+
* 指令用法：
73+
* - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
74+
* <a-button v-action:add >添加用户</a-button>
75+
* <a-button v-action:delete>删除用户</a-button>
76+
* <a v-action:edit @click="edit(record)">修改</a>
77+
*
78+
* - 当前用户没有权限时，组件上使用了该指令则会被隐藏
79+
* - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
80+
*
81+
* @see https://github.com/sendya/ant-design-pro-vue/pull/53
82+
*/
83+
const action = Vue.directive('action', {
84+
bind: function (el, binding, vnode) {
85+
const actionName = binding.arg
86+
const roles = store.getters.roles
87+
const permissionId = vnode.context.$route.meta.permission
88+
let actions = []
89+
roles.permissions.forEach(p => {
90+
if (p.permissionId != permissionId) {
91+
return
92+
}
93+
actions = p.actionList
94+
})
95+
if (actions.indexOf(actionName) < 0) {
96+
setTimeout(() => {
97+
if(el.parentNode == null){
98+
el.style.display = 'none'
99+
}
100+
else{
101+
el.parentNode.removeChild(el)
102+
}
103+
}, 10)
104+
105+
}
106+
}
107+
})
108+
109+
export {
110+
action
111+
}

0 commit comments

Comments
 (0)