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

[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>
}