前端路由级别的鉴权是如何实现的？

[Emma-Alpha]

Version

npx envinfo --system --browsers --npmPackages '@modern-js/*'

Details

有没有大佬能提供一下demo?

Reproduce link

无

Reproduce Steps

无

[Emma-Alpha]

我想知道有没有类似于UMi的wrapper的设计？

[Emma-Alpha]

可以我对DataLoader还没有深入了解，现在不知道怎么实现路由级别甚至组件级别的权限控制

[xuchaobei]

在路由组件文件中，在组件外层包裹一个用于鉴权的组件即可。Modern.js 的路由是基于 React Router 6 实现的，所以可以参考 React Router 6 的方式对路由权限进行控制，例如这个 demo

[Emma-Alpha]

在约定式路由下，如何实现这种？看起来是使用了自控式路由来实现的

[Emma-Alpha]

因为我们团队之前是习惯使用配置式路由，而非自控式路由。(原因：不容易管理)，初步了解到modern的约定式路由也挺符合团队需求，所以想使用约定式路由。

[xuchaobei]

这个和约定式路由、自控式路由无关。具体到约定式路由，哪个路由组件需要被控制，在这个组件外层套一下用来鉴权的组件（相当于demo里的 RequiredAuth）就行了。

例如:

const SomeRouteComp = () => {
   //...
}

export default () => {
    <RequiredAuth>
       <SomeRouteComp/>
    </RequiredAuth>
}

[xmsz-stu]

有内置的插件吗 内置的会方便一点
而且这个场景在后台应用中应该是非常必须的

[zllkjc]

目前没有提供，欢迎贡献一个！

[lanmingle]

嘻嘻！我通了几晚的宵，可算完成了初版，已全部测试OK了，从零撸了基于路由控制的权限控制，可以兼容原生v6

[zllkjc]

Nice！

[zllkjc]

有实例的代码仓库可以看看吗

[lanmingle]

有实例的代码仓库可以看看吗

在折腾一段时间先，目前在优化改进。

[lanmingle]

有实例的代码仓库可以看看吗

@zllkjc

modern-js 版本例子：https://github.com/lanaqi-opensource/react-router-security-rrs-demo
react-router-dom 6 版本例子：https://github.com/lanaqi-opensource/react-router-security-rrs6-demo

npm 仓库地址：
https://www.npmjs.com/package/@lanaqi/rrs

https://www.npmjs.com/package/@lanaqi/rrs6

暂不开源（我是穷人 Q_Q）