Skip to content

A
ant-design-pro-vue
Commit 1f7068a7 by Sendya
Options

refactor: main

parent bee9ca71
Showing with 189 additions and 165 deletions
src/core/bootstrap.js 0 → 100644
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)
}
\ No newline at end of file
src/core/use.js 0 → 100644
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)
\ No newline at end of file
src/main.js
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import Storage from 'vue-ls' import router from './router'
import router from './router' import store from './store/'
import store from './store/' import { VueAxios } from '@/utils/request' // axios 不建议引入到 Vue 原型链上
import { VueAxios } from '@/utils/request' import './core/use'
import bootstrap from './core/bootstrap'
import Antd from 'ant-design-vue' import '@/permission' // permission control
import Viser from 'viser-vue' import '@/utils/filter' // global filter
import 'ant-design-vue/dist/antd.less' // or 'ant-design-vue/dist/antd.less'
Vue.config.productionTip = false
import VueClipboard from 'vue-clipboard2'
import '@/permission' // permission control Vue.use(VueAxios, router)
import '@/utils/filter' // base filter
import PermissionHelper from '@/utils/helper/permission' new Vue({
import { removeLoadingAnimate } from '@/utils/util' router,
store,
import { created () {
ACCESS_TOKEN, bootstrap()
DEFAULT_COLOR, },
DEFAULT_THEME, render: h => h(App)
DEFAULT_LAYOUT_MODE, }).$mount('#app')
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')
src/permission.js
import Vue from 'vue' import Vue from 'vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import NProgress from 'nprogress' // progress bar import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style import 'nprogress/nprogress.css' // progress bar style
import notification from 'ant-design-vue/es/notification' import notification from 'ant-design-vue/es/notification'
import { ACCESS_TOKEN } from '@/store/mutation-types' import { ACCESS_TOKEN } from '@/store/mutation-types'
NProgress.configure({ showSpinner: false }) // NProgress Configuration NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() // start progress bar NProgress.start() // start progress bar
if (Vue.ls.get(ACCESS_TOKEN)) { if (Vue.ls.get(ACCESS_TOKEN)) {
/* has token */ /* has token */
if (to.path === '/user/login') { if (to.path === '/user/login') {
next({ path: '/dashboard/workplace' }) next({ path: '/dashboard/workplace' })
NProgress.done() NProgress.done()
} else { } else {
if (store.getters.roles.length === 0) { if (store.getters.roles.length === 0) {
store store
.dispatch('GetInfo') .dispatch('GetInfo')
.then(res => { .then(res => {
const roles = res.result && res.result.role const roles = res.result && res.result.role
store.dispatch('GenerateRoutes', { roles }).then(() => { store.dispatch('GenerateRoutes', { roles }).then(() => {
// 根据roles权限生成可访问的路由表 // 根据roles权限生成可访问的路由表
// 动态添加可访问路由表 // 动态添加可访问路由表
router.addRoutes(store.getters.addRouters) router.addRoutes(store.getters.addRouters)
const redirect = decodeURIComponent(from.query.redirect || to.path) const redirect = decodeURIComponent(from.query.redirect || to.path)
if (to.path === redirect) { if (to.path === redirect) {
// hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
next({ ...to, replace: true }) next({ ...to, replace: true })
} else { } else {
// 跳转到目的路由 // 跳转到目的路由
next({ path: redirect }) next({ path: redirect })
} }
}) })
}) })
.catch(() => { .catch(() => {
notification.error({ notification.error({
message: '错误', message: '错误',
description: '请求用户信息失败，请重试' description: '请求用户信息失败，请重试'
}) })
store.dispatch('Logout').then(() => { store.dispatch('Logout').then(() => {
next({ path: '/user/login', query: { redirect: to.fullPath } }) next({ path: '/user/login', query: { redirect: to.fullPath } })
}) })
}) })
} else { } else {
next() next()
} }
} }
} else { } else {
if (whiteList.includes(to.name)) { if (whiteList.includes(to.name)) {
// 在免登录白名单，直接进入 // 在免登录白名单，直接进入
next() next()
} else { } else {
next({ path: '/user/login', query: { redirect: to.fullPath } }) next({ path: '/user/login', query: { redirect: to.fullPath } })
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
} }
} }
}) })
router.afterEach(() => { router.afterEach(() => {
NProgress.done() // finish progress bar NProgress.done() // finish progress bar
}) })
/**
* Action 权限指令
* 指令用法：
/**Action 权限指令**/ * - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
const action = Vue.directive('action', { * <a-button v-action:add >添加用户</a-button>
bind: function (el, binding, vnode) { * <a-button v-action:delete>删除用户</a-button>
const actionName = binding.arg * <a v-action:edit @click="edit(record)">修改</a>
const roles = store.getters.roles *
const permissionId = vnode.context.$route.meta.permission * - 当前用户没有权限时，组件上使用了该指令则会被隐藏
let actions = [] * - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
roles.permissions.forEach(p => { *
if (p.permissionId != permissionId) { * @see https://github.com/sendya/ant-design-pro-vue/pull/53
return */
} const action = Vue.directive('action', {
actions = p.actionList bind: function (el, binding, vnode) {
}) const actionName = binding.arg
if (actions.indexOf(actionName) < 0) { const roles = store.getters.roles
setTimeout(() => { const permissionId = vnode.context.$route.meta.permission
if(el.parentNode == null){ let actions = []
el.style.display = 'none' roles.permissions.forEach(p => {
} if (p.permissionId != permissionId) {
else{ return
el.parentNode.removeChild(el) }
} actions = p.actionList
}, 10) })
if (actions.indexOf(actionName) < 0) {
} setTimeout(() => {
} if(el.parentNode == null){
}) el.style.display = 'none'
}
export { else{
action el.parentNode.removeChild(el)
} }
}, 10)
}
}
})
export {
action
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment