Ant Design Pro V5初体验

      上星期开始了一个基于 Ant Design Pro 的项目,使用create umi构建项目发现 src 中的 layoutsmodels 都不见鸟,心中默念umi又有bug了,但是跑起来后发现可以正常运行,而且还修改了登录逻辑,nice,原来是V5。
      这里列几点V5与V4的不同之处。通过这些也可看出一丝蚂蚁团队对最佳实践的思考。

1.登录逻辑

在V4中即使没登录也可跳转到内部地址,V5中会验证你是否登录

/**   可在/mock/user.ts中查看
 * 当前用户的权限,如果为空代表没登录
 * current user access, if is '', user need login
**/
if (!getAccess()) {
      res.status(401).send({
        data: {
          isLogin: false,
        },
        errorCode: '401',
        errorMessage: '请先登录!',
        success: true,
      });
      return;
    }

2.权限管理

在V4中通过包裹 SercurityLayout 设置权限,V5中则更加简洁,只需在路由中配置access。

//config.ts
{
	  path: '/account ',
	  name: 'account',
	  icon: 'FileText',
	  access: 'canAdmin',    //看这里  canAdmin在/src/access.ts中配置
	  routes: [
	    {
	      path: '/account/manage',
	      name: 'manage',
	      icon: 'FileAdd',
	    }
	 ]
{

3.layouts的取消

V5中取消了 layouts ,个人感觉使整个框架更清晰,操作起来更方便。
新增 /src/app.tsx ,react风入口文件
页面的各个主要修改部分都在 /src/components 中找到,如Footer、登录后右上角的语言选择等

4.Models的取消

V5貌似是要放弃dva,转而拥抱各种Hooks
特别注意下面

useModel('@@initialState')

异步请求采用ES8中的 await & async

好了,水平有限,初探至此。希望蚂蚁团队多多加油,重构重构。

你可能感兴趣的:(react,react,typescript,jsx)