umi踩坑之旅 从入门到放弃

公司发展新业务,一个人从零开始建设。对比之后为了节约搭框架的时间和精力。我选择了dva。但是由于没有使用过,所以最开始没有选择umi配合。出来混,迟早是要还的。在遇到我想在request里面使用state的时候,我遇到了项目的第一个坑?由于connect只能用在component,所以这里不能用,百度的解决方法是从window.g_app里拿。解决方法之统一。让我不得不考虑umi。于是,我第一次重构了我的项目。

全局安装umi之后init项目。然后!!!!当我辛辛苦苦把代码挪过来之后发现window下面依旧没有g_app。去百度找发现没有结果。感觉就是所有人的window都有就我没有。我到处找都没有找到相关博客。文档里也没搜到这个东西。最后只能撸文档。然后看到了这样一句话:删除 disableGlobalVariables,始终无全局变量,无需配置。excuse me????啥意思,没有全局变量了???于是我又不死心的查了查。发现好像真的没有了。主要是umi3相关文档太少了。据说是3月刚出的。4月用的我就赶上了。难受。于是,我进行了第二次重构!!

我全局安装了umi2.然后重新create umi。嗯,很棒。还是umi3.试了几次都是3。我又去找了umi2的文档。下载了他的demo,打算自己搞文件路径。首先,不得不说,我第一次碰到这种官方demo跑不起来的。终于把他的bug改完之后跑起来的页面一言难尽。没有css。但是好歹跑起来了。我把项目搞过来之后运行,哇偶!报错了!具体问题是找不到@@/history。node-modules下面一个包,umi相关。后来我怀疑是其他包影响的。所以删了modules文件夹一个一个按,看是什么影响了。然并卵,换了问题,查了一下发现是版本冲突。需要全局删除然后重新安装,重点是要清除缓存。具体的问题我忘记是什么了。文章写的比较晚。我看了看解决方案。我决定不用umi了。重新跑了那个只有dva的项目,一切都是如此和谐。

也许是我没找到好的方法,但是对于一个没接触过的新手,我觉得这个东西不是很友好。也欢迎大佬们有解决方法的可以给出意见。小渣渣的踩坑总结~

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 中配置路由权限的步骤。通过上述配置,我们可以实现简单的路由权限控制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值