feat: 获取数据权限在layout pagechange时触发

config/routes.js

@@ -38,7 +38,7 @@ export default [
     routes: [
       {
         path: '/customer',
-        redirect: '/customer/Company'
+        redirect: '/customer/company'
         // authority: ['admin', 'company_access']
       },
       {

src/app.tsx

@@ -1,6 +1,8 @@
-import { queryCurrentUser } from './services/user'
+import { queryCurrentUser, queryPermData } from './services/user'
 import { history } from 'umi'
 import RightContent from '@/components/RightContent'
+import { PERMISSION_NEED_PATH } from './utils/consts/customer'
+import { message } from 'antd'
 
 const loginPath = '/user/login'
 
@@ -15,36 +17,53 @@ export async function getInitialState() {
     }
     return undefined
   }
+
+  const fetchPermData = async () => {
+    try {
+      const res = await queryPermData()
+      return res.data
+    } catch (error) {
+      message.error('获取数据权限失败，请联系管理员')
+    }
+    return undefined
+  }
   // 如果是登录页面，不执行
   if (history.location.pathname !== loginPath) {
     const currentUser = (await fetchUserInfo()) || {}
 
     return {
       fetchUserInfo,
+      fetchPermData,
       ...currentUser,
       settings: {}
     }
   }
   return {
     fetchUserInfo,
+    fetchPermData,
     settings: {}
   }
 }
 
-export const layout = ({ initialState }) => {
+export const layout = ({ initialState, setInitialState }) => {
   return {
     rightContentRender: () => <RightContent />,
     disableContentMargin: false,
     waterMarkProps: {
       content: initialState?.currentUser?.username
     },
-    // onPageChange: () => {
-    //   const { location } = history
-    //   // 如果没有登录，重定向到 login
-    //   if (initialState?.currentUser?.staffId && location.pathname !== loginPath) {
-    //     history.push(loginPath)
-    //   }
-    // },
+    onPageChange: async () => {
+      const { location } = history
+      // 如果没有登录，重定向到 login
+      if (
+        initialState?.currentUser?.staffId &&
+        location.pathname !== loginPath &&
+        PERMISSION_NEED_PATH.includes(location.pathname)
+      ) {
+        const permData = await initialState.fetchPermData()
+        permData && setInitialState({ ...initialState, permData })
+      }
+    },
     // menuHeaderRender: false,
     ...initialState?.settings
   }

src/pages/Customer/Business/index.jsx

@@ -12,7 +12,6 @@ import CompanyDetail from '../Company/components/CompanyDetail'
 import { Funnel } from '@ant-design/charts'
 
 const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
-  const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const tRef = useRef(null)
   const { toggleDrawer, setDrawerProps } = useModal()
   const [state, setState] = useState({
@@ -20,6 +19,9 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
     params: { businessGroupId: null },
     funnelData: []
   })
+
+  const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
+
   useEffect(() => {
     if (!groupList) {
       dispatch({

src/pages/Customer/Client/index.jsx

@@ -32,6 +32,7 @@ const Client = props => {
     shouldUpdate,
     loading
   } = props
+
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const tRef = useRef()
   const [tagState, setTagState] = useState({

src/pages/Customer/Company/index.jsx

@@ -26,8 +26,9 @@ const Company = props => {
     shouldUpdate,
     loading
   } = props
+
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
-  console.log('permData', permData)
+
   const { toggleDrawer, setDrawerProps } = useModal()
   const tRef = useRef(null)
   const [selectKeys, setSelectKeys] = useState([])

src/pages/workbench/Dashboard/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import ProTable from '@ant-design/pro-table'
-import { connect } from 'umi'
+import { connect, useModel } from 'umi'
 import { Row, Col, Divider, Select } from 'antd'
 import { AddressBook, City, Finance, Comment } from '@icon-park/react'
 import { DualAxes } from '@ant-design/charts'
@@ -12,7 +12,7 @@ import LeaderBoard from './components/LeaderBoard'
 import { cyclicalOp } from './consts'
 
 const Dashboard = ({ dispatch, groupList = [] }) => {
-  const permData = {}
+  const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const [state, setState] = useState({
     visible: false,
     reminderData: [],

src/consts/customer.js

@@ -15,3 +15,11 @@ export const customerTypeOptions = [
   { label: '个人', value: '个人' },
   { label: '合作伙伴', value: '合作伙伴' }
 ]
+
+/** 需要获取数据权限的路由 */
+export const PERMISSION_NEED_PATH = [
+  '/customer/company',
+  '/customer/client',
+  '/customer/business',
+  '/workbench/dashboard'
+]