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

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

[zllkjc]

Nice！

[zllkjc]

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

[lanmingle]

@zllkjc 已开源，代码已迁移到 github 了。

export default withSecurityBlocker(Root, bundler => {
    return bundler
        .context(builder => {
            return builder
                // 可选层级权限
                // .hierarchy('superadmin>admin;admin>users;users>guest')
                .resource(rb => rb.patterns('/login', '/logout', '/denied', '/signature').anonymous().build())
                .resource(rb => rb.patterns('/sheet').permissions('admin').signatured().build())
                .resource(rb => rb.patterns('/*').authenticated().build())
                .build();
        })
        .manager(builder => {
            return builder
                .behave({
                    notAuthenticationPath: '/login',
                    notSignaturePath: '/signature',
                    accessDeniedPath: '/denied',
                })
                .build();
        })
        // .addons()
        .build()

});

源码仓库地址：https://github.com/lanaqi-opensource/react-security-router
react-router-dom 例子：https://github.com/lanaqi-opensource/rsr6-demo
Modern.js 例子：https://github.com/lanaqi-opensource/rsr-demo

npm 包：

• https://www.npmjs.com/package/@lanaqi/rsr
• https://www.npmjs.com/package/@lanaqi/rsr-nprogress