umi ssr 之从入门到放弃

       今年7月份的时候用umi搭建了react ssr,发现了不少问题,记录一下,作为后来人选型的参考,是真正的从入门到放弃。如果下面罗列的问题你们自己有办法解决,那可以考虑使用,当然,以下仅供参考,可能官方后续会把问题解决。

1、本地开发的时候,每次修改代码,node都会重启,导致服务访问不了,开发效率很低。给官方提了issue,看回复应该是不改了

2、服务端渲染时,如果开启按需加载,会componentDidMount会执行两次,给官方提了issue(https://github.com/umijs/umi/issues/5351),没有看到解决方案,只能关闭按需加载。

3、服务端渲染发现很耗CPU, 单台服务器80左右并发时基本上CPU就被占满了。可能可以通过一些缓存方案解决不过这也挺麻烦的。

以上是影响比较大的问题。下面列一些问题,有一些解决方案,供已经在使用的同学参考。

1、如果在layout层使用了TransitionGroup和CSSTransition做页面跳转动画,会导致getInitialProps执行多次,因为他们渲染了多个实例。只能避免使用这些动画。

2、layout 如下写法导致在测试环境的时候,编译出来的标签嵌套有问题ÿ

Umi 中配置路由权限需要以下步骤: 1. 安装依赖 首先需要安装 `@umijs/plugin-access` 插件,该插件提供了路由权限控制的功能。 ```bash npm install @umijs/plugin-access --save-dev ``` 2. 配置插件 在 `.umirc.js` 或 `config/config.js` 文件中添加插件配置: ```js export default { plugins: [ ['@umijs/plugin-access', { access: 'src/access.js', }], ], }; ``` 3. 编写权限控制文件 在 `src` 目录下创建 `access.js` 文件,该文件用于定义路由权限控制规则。 ```js export default function access(initialState) { const { currentUser } = initialState || {}; return { canReadPage1: currentUser && currentUser.role === 'admin', canReadPage2: currentUser && currentUser.role === 'user', }; } ``` `access.js` 文件需要导出一个函数,并接受一个参数 `initialState`,该参数包含了当前用户的信息等状态。函数需要返回一个对象,对象中定义了每个路由的访问权限。 在上面的例子中,我们定义了两个权限:`canReadPage1` 和 `canReadPage2`,分别表示访问页面1和页面2的权限。如果用户拥有相应的权限,即 `currentUser.role` 等于 `admin` 或 `user`,则返回 `true`,否则返回 `false`。 4. 配置路由 在路由配置中使用 `access` 属性指定路由访问权限: ```js export default [ { path: '/page1', component: '@/pages/Page1', access: 'canReadPage1', }, { path: '/page2', component: '@/pages/Page2', access: 'canReadPage2', }, ]; ``` 在上面的例子中,我们将 `access` 属性分别指定为 `canReadPage1` 和 `canReadPage2`,表示只有当用户拥有对应的权限时才能访问对应的路由。 以上就是在 Umi 中配置路由权限的步骤。通过上述配置,我们可以实现简单的路由权限控制。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值