fix(demo): menuHeaderRender

- move check permission
-

package.json

@@ -11,7 +11,7 @@
     "lint:nofix": "vue-cli-service lint --no-fix"
   },
   "dependencies": {
-    "@ant-design-vue/pro-layout": "^0.3.12",
+    "@ant-design-vue/pro-layout": "^1.0.1",
     "@antv/data-set": "^0.10.2",
     "ant-design-vue": "^1.6.2",
     "axios": "^0.19.0",

src/core/lazy_use.js

@@ -53,7 +53,7 @@ import VueCropper from 'vue-cropper'
 import Dialog from '@/components/Dialog'
 import MultiTab from '@/components/MultiTab'
 import PageLoading from '@/components/PageLoading'
-import PermissionHelper from '@/utils/helper/permission'
+import PermissionHelper from '@/core/permission/permission'
 import './directives/action'
 
 Vue.use(ConfigProvider)

src/utils/helper/permission.js → src/core/permission/permission.js

@@ -10,6 +10,10 @@ export const PERMISSION_ENUM = {
   'export': { key: 'export', label: '导出' }
 }
 
+/**
+ * <a-button v-if="$auth('form.edit')">Button</a-button>
+ * @param Vue
+ */
 function plugin (Vue) {
   if (plugin.installed) {
     return

src/core/use.js

@@ -10,7 +10,7 @@ import 'ant-design-vue/dist/antd.less'
 import VueClipboard from 'vue-clipboard2'
 import MultiTab from '@/components/MultiTab'
 import PageLoading from '@/components/PageLoading'
-import PermissionHelper from '@/utils/helper/permission'
+import PermissionHelper from '@/core/permission/permission'
 // import '@/components/use'
 import './directives/action'
 

src/layouts/BasicLayout.vue

@@ -1,13 +1,11 @@
 <template>
   <pro-layout
-    :title="title"
     :menus="menus"
     :collapsed="collapsed"
     :mediaQuery="query"
     :isMobile="isMobile"
     :handleMediaQuery="handleMediaQuery"
     :handleCollapse="handleCollapse"
-    :logo="logoRender"
     :i18nRender="i18nRender"
     v-bind="settings"
   >
@@ -18,6 +16,16 @@
     <ads v-if="isProPreviewSite && !collapsed"/>
     <!-- Ads end -->
 
+    <!-- 1.0.0+ 版本 pro-layout 提供 API，
+          我们推荐使用这种方式进行 LOGO 和 title 自定义
+    -->
+    <template v-slot:menuHeaderRender>
+      <div>
+        <logo-svg />
+        <h1>{{ title }}</h1>
+      </div>
+    </template>
+
     <setting-drawer :settings="settings" @change="handleSettingChange" />
     <template v-slot:rightContentRender>
       <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
@@ -47,6 +55,7 @@ export default {
     SettingDrawer,
     RightContent,
     GlobalFooter,
+    LogoSvg,
     Ads
   },
   data () {
@@ -151,9 +160,6 @@ export default {
           }
           break
       }
-    },
-    logoRender () {
-      return <LogoSvg />
     }
   }
 }

src/main.js

@@ -16,16 +16,18 @@ import themePluginConfig from '../config/themePluginConfig'
 import './mock'
 
 import bootstrap from './core/bootstrap'
-import './core/lazy_use'
+import './core/lazy_use' // use lazy load components
 import './permission' // permission control
 import './utils/filter' // global filter
-import './global.less'
+import './global.less' // global style
 
 Vue.config.productionTip = false
 
 // mount axios to `Vue.$http` and `this.$http`
 Vue.use(VueAxios)
+// use pro-layout components
 Vue.component('pro-layout', ProLayout)
+Vue.component('page-container', PageHeaderWrapper)
 Vue.component('page-header-wrapper', PageHeaderWrapper)
 
 window.umi_plugin_ant_themeVar = themePluginConfig.theme
@@ -34,6 +36,7 @@ new Vue({
   router,
   store,
   i18n,
+  // init localstorage, vuex
   created: bootstrap,
   render: h => h(App)
 }).$mount('#app')

src/permission.js

@@ -10,7 +10,7 @@ import { i18nRender } from '@/locales'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist
+const allowList = ['login', 'register', 'registerResult'] // no redirect allowList
 const loginRoutePath = '/user/login'
 const defaultRoutePath = '/dashboard/workplace'
 
@@ -61,8 +61,8 @@ router.beforeEach((to, from, next) => {
       }
     }
   } else {
-    if (whiteList.includes(to.name)) {
-      // 在免登录白名单，直接进入
+    if (allowList.includes(to.name)) {
+      // 在免登录名单，直接进入
       next()
     } else {
       next({ path: loginRoutePath, query: { redirect: to.fullPath } })

src/utils/permissions.js

@@ -1,8 +0,0 @@
-export function actionToObject (json) {
-  try {
-    return JSON.parse(json)
-  } catch (e) {
-    console.log('err', e.message)
-  }
-  return []
-}

src/views/other/UserList.vue

@@ -165,7 +165,7 @@
 import pick from 'lodash.pick'
 import { STable } from '@/components'
 import { getRoleList, getServiceList } from '@/api/manage'
-import { PERMISSION_ENUM } from '@/utils/helper/permission'
+import { PERMISSION_ENUM } from '@/core/permission/permission'
 
 const STATUS = {
   1: '启用',

src/views/other/modules/RoleModal.vue

@@ -23,7 +23,6 @@
 
 <script>
 import { getPermissions } from '@/api/manage'
-import { actionToObject } from '@/utils/permissions'
 import pick from 'lodash.pick'
 
 export default {
@@ -123,7 +122,7 @@ export default {
       getPermissions().then(res => {
         const result = res.result
         that.permissions = result.map(permission => {
-          const options = actionToObject(permission.actionData)
+          const options = JSON.parse(permission.actionData) || []
           permission.checkedAll = false
           permission.selected = []
           permission.indeterminate = false