antd pro v5

antd pro v5 关于网络请求和路由设置相关

• 网络请求
  antd在前段时间发布了v5版本，已经支持预览了，大家可以通过链接v5预览。

看完文档再对比v4，我个人感觉v5精简了不少，首先是弱化了dva，加强了hooks的使用，在v5版本中也已经默认使用typescript了。

这里和大家分享一下在v5使用中遇到的问题。
网络请求方面，官网文档中有提到umi.js-request 。在使用时发生跨域。。。
解决方案有很多，这里只分享前端解决跨域的方法，在v5之前的版本中，可以在package.json文件中配置代理。
v5中，代理统一在 /config/proxy.js 文件中配置

/**
 * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
 * The agent cannot take effect in the production environment
 * so there is no configuration of the production environment
 * For details, please see
 * https://pro.ant.design/docs/deploy
 */
export default {
  // dev: {
  //   '/api/': {
  //     target: 'https://preview.pro.ant.design',
  //     changeOrigin: true,
  //     pathRewrite: { '^': '' },
  //   },
  // },
  dev: {
    '/api/': {
      target: 'http://xxxxxxxx:8129/sp/sys/api/',
      changeOrigin: true,
      pathRewrite: { '^/api/': '' },
    },
  },
  test: {
    '/api/': {
      target: 'http://xxxxxxxxxx :8129/sp/sys/api/',
      changeOrigin: true,
      pathRewrite: { '^/api/': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'http://xxxxxxxxxx:8129/sp/sys/api/',
      changeOrigin: true,
      pathRewrite: { '^/api/': '' },
    },
  },
};

代理设置好之后请求接口，在network中看到的请求路径为http://localhost:8000/+‘接口路径’，这是正确的，并不是配置没生效。
在打包部署时需要在接口出添加基本路径。

因为v5的封装的请求使用了ts，如果有不习惯的小伙伴也一样可以用js，接口和请求异常处理都可以用js替换，代理一样处理即可。

• 菜单路由
  在 /config/config.js 中可以配置路由和路由权限。

v5登录拦截写在app.tsx中，代码如下

export async function getInitialState(): Promise<{
  settings?: LayoutSettings;
  currentUser?: API.CurrentUser;
  fetchUserInfo: () => Promise<API.CurrentUser | undefined>;
}> {
  const fetchUserInfo = async () => {
    try {
      // const currentUser = await queryCurrent();
      let res = await jurisdictionUser();
      let currentUser = res.data.result;
      Object.assign(currentUser,{userid:res.data.result.userinfo.tel});
      Object.assign(currentUser,{access:"admain"});
      Object.assign(currentUser,{avatar:"https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"});
      Object.assign(currentUser,{name:res.data.result.userinfo.account});
      // console.log(currentUser)
      return currentUser;
    } catch (error) {
      history.push('/user/login');
    }
    return undefined;
  };
  // 如果是登录页面，不执行
  if (history.location.pathname !== '/user/login') {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      settings: defaultSettings,
    };
  }
  return {
    fetchUserInfo,
    settings: defaultSettings,
  };
}

我这里是将登录后得到的数据存在initState中，方便后面使用.

为了动态展示左侧菜单栏，这里改写下菜单数组，代码如下

export const layout = ({
  initialState,
}: {
  initialState: { 
    settings?: LayoutSettings; 
    currentUser?: API.CurrentUser 
  };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    onPageChange: () => {
      const { currentUser } = initialState;
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!currentUser?.userid && location.pathname !== '/user/login') {
        history.push('/user/login');
      }
    },
    // menuHeaderRender: undefined,
    menuHeaderRender: () => <div></div>,
    menuDataRender: (data) => {
      let menuDatas:Array<{}> = [];
      if(initialState.currentUser){
        let  currentUsers = initialState.currentUser.menus;
        //设置默认路由
        let defaultRoutes = [
          {
            path: '',layout:false,routes:[{name:'登录',path:'/user/login',component:'./user/login',},],},
            {path:'/',redirect: currentUsers[0].url,}, 
            {component: './404',},
        ];
        //向原数组中添加字段
        currentUsers.map((item:any,index:number)=>{
          Object.assign(item,{path:item.url});
          item.icon = '';
          return currentUsers
        })
        //菜单数据树形结构化
        menuDatas = treeData(currentUsers, 'id', 'parentId', 'routes')
        menuDatas = menuDatas.concat(defaultRoutes);
        // console.log(menuDatas)
      }
      
      return menuDatas
    },
    ...initialState?.settings,
  };
};

我这里后端返回的菜单数组结构是[{id:xx,parent_id:xx,name:xx,url:xx,component:xx}]类似的数组结构，parent_id为0时为一级菜单，不为0时指向父级菜单id值，利用递归函数可以得到树形结构。替换config的路由配置，可以实现权限展示。

目前还在探索中。。。