Authorized Menu about ant-design-pro

[henry-fun]

菜单权限管理貌似在ant-admin中有涉及到，但感觉对页面元素的权限管理有限，期待pro能出个比较靠谱的mvvm架构下的权限管理架构。

[chenshuai2144]

预计下周 ... 哈哈哈

[nikogu]

菜单管理功能其实应该就需要引入整体权限管理的功能结构了，我们后续会添加上去

[chenshuai2144]

菜单功能对于很多业务系统来说是必须的。期待功能的加入

[liumin1128]

可以参考下#91

[nikogu]

Authorized 将会做成一个组件公布出来吗?

@chenshuai2144 我觉得可以，直接放到 Pro 的组件里面就好

比如管理员1对页面1和2有权限，管理员2对页面2，3有权限。感觉数据都是从后台获取的，前台根据是否有权限决定是否能够访问

这个就是 role 的概念

[oqq5518]

官方大概什么时候能推出权限管理的模块阿？

[zqqq]

关注

[zhiyan]

按理这周更新的吧? 时间有变动吗？

[Anonymity94]

很关心这个问题

[sillyfeng]

希望老铁们可以尽早加上啊，项目里正好用上。。 @nikogu

[kaoding]

使用早点加这这块（程序员不该要求程序员，^^），在11月底antd 3.0 正式出来的时候，可以使用将Pro用到实际环境中。

[remotesc2]

同样关注，项目中正好需要用到此块。
以前自己只是单纯使用高阶组件进行权限验证，感觉每个功能都要包装，很麻烦

[mjfme]

权限功能对于后台系统非常关键，关注

[baiheinet]

关注

[mushishixian]

关注

[nikogu]

权限系统设计参考

背景

菜单的权限系统设计实际上是页面的权限，通常来讲对页面的权限与后台的配合通常通过两个方式：

• 异步请求的权限确认
• 服务端打入前端 js 的权限配置值

无论如后后端都需要对每个请求进行权限验证，而前端主要是为了更好的交互和信息展现展示或隐藏以及提示相关权限信息。

使用方式

本着便利直白功能完善的原则，设计的使用方式如下：

import Authorized from 'Authorized';

// 配合 router 的使用
<Switch>
  <Route exact key path component />
  // Authorized 需要读取 authorized.js 然后判断进行展示组件等操作
  <Authorized role={['admin', 'superAdmin']}>
    <Route exact key path component />
  </Authorized>
</Switch>

// 权限配置文件 authorized.js

export {
  admin: () => {
    // 根据一些情况请求或者读取服务端注入的配置
  },
  superAdmin: () => window._auth_.superAdmin,
}

// nav/common.js 的统一配置
export const getNavData = app => [
  {
    component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
    layout: 'BasicLayout',
    name: '首页',
    path: '/',
    children: [
      {
        name: 'Dashboard',
        icon: 'dashboard',
        path: 'dashboard',
        children: [
          {
            name: '分析页',
            path: 'analysis',
            component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
            role: 'admin', // 指定角色，方便后续在 `getRouteData` 里面处理
          },
...

@ddcat1115 看看是否可行

[ddcat1115]

感觉大概就是这样。Authorized 和 Route 可以合并成一个 Route 的高阶组件，方便获取 nav.js 里的配置，authorized.js 里就是放去后台取角色/登录 相关的操作，同时维护一个角色相关的全局状态。其实跟官网这个蛮像 https://reacttraining.com/react-router/web/example/auth-workflow 另外可以再考虑增加一个元素级权限控制的示例/组件

[chenshuai2144]

Authorized 这样还是耦合在一起了.
依赖于pro项目.可以单独的封装成一个组件吗?
组件更加的灵活.

<Authorized userRole="admin">
    <AuthorizedRoute role={['admin', 'superAdmin']} />
</Authorized>

权限的配置传入.而不是内置在组建中.

[nikogu]

@chenshuai2144

只用这个 Authorized 没有耦合吧，而且里面不需要一定是 Route，只需要满足 role 角色就展示对应组件（他的 children）就好，Authorized 本身就是独立的，跟 Pro 没有关系呢

[chenshuai2144]

那如何取得当前登录用户的权限了?
在Authorized组件内部获取?
@nikogu

[nikogu]

Authorized 通过 authorized.js 这个配置文件获取，而这个配置文件的内容是：

// 权限配置文件 authorized.js

export {
  admin: () => {
    // 根据一些情况请求或者读取服务端注入的配置
  },
  superAdmin: () => window._auth_.superAdmin,
}

里面的权限来源可以是异步请求，或者服务端打入 js 的全局权限配置

[chenshuai2144]

@nikogu
Authorized 将会做成一个组件公布出来吗?

[sbyps]

这种场景是基于一种类型的管理员可以管理若干页面，预置了几种类型的角色。那是否考虑过不同管理员对各个页面都有不同的权限呢

[sbyps]

比如管理员1对页面1和2有权限，管理员2对页面2，3有权限。感觉数据都是从后台获取的，前台根据是否有权限决定是否能够访问

[sbyps]

@nikogu role是一样的啊，都是管理员，但不能预知有多少个情况，管理员的权限列表是能被修改的

[nikogu]

role是一样的啊，都是管理员，但不能预知有多少个情况，管理员的权限列表是能被修改的

这个是后台的事了，这种情况前端就一个角色，请求里面根据 session 处理就好，本质就是发个请求获取后台对应的权限信息

[chenshuai2144]

@sbyps 权限表的问题。你可以后台生成navData.我现在就是这么做的

[topwood]

mark

[chenshuai2144]

@nikogu. 做成组件的话 我觉得最好传入Props。
直接传入当前的用户的权限比较好做封装

[sbyps]

对，但是我看设计里面authrozied.js的设计分admin和superadmin，我认为admin角色下还要有各个管理员，这部分人角色一样，权限不同。那能从后台获取到一整份权限列表，怎么在nav.js里面注入呢，因为管理员个数不可知。
按照我的理解和思路，就是用户登录系统时已经请求到了他自己的权限列表，这样进行各个菜单的隐藏或显示，然后如果访问了没有权限的页面，根据权限组件进行权限列表的判定是否跳转到503，您看是否一致

[chenshuai2144]

@sbyps authrozied.js是为了适应pro,. Pro只是个框架。。你的需求 权限组件都不一定需要。 直接返回路由表。没权限的组件直接404。安全性更高

[sbyps]

@chenshuai2144 我们加个联系方式私下交流一下行么

[nikogu]

直接传入当前的用户的权限比较好做封装

可以，将 authrozied.js 跟组件分离开，Authrozied 接收一个配置就好。然后用一个上层组件包一下，不过是否封装 Route 还需要讨论下，直接用 Authrozied 比较直白、灵活，便于扩展。

[chenshuai2144]

@nikogu 直接使用Authrozied ,我们使用的时候可以封装一个AuthroziedRouter组件.
并非管理员查看的都是的路由.有可能分析页中的某个图表只有管理员能查看,

[mjfme]

@sbyps 你的需求其实多建几种角色就行了

[oqq5518]

@chenshuai2144 谢谢你们哈。项目急需，权限控制粒度除了页面，还有针对资源和动作的吗？

[chenshuai2144]

@oqq5518 这种东西建议你放到后端,
Spring Security 提供了特别细粒度的调控.
如果都放到前端. chrome里面一改代码,你们的系统就崩溃了.

[oqq5518]

@chenshuai2144 请问，你的建议是前端控制页面是否可见，至于某页面的具体元素则由后台做校验吗？

[chenshuai2144]

@oqq5518 数据生成页面.
数据由后台控制.

[oqq5518]

@chenshuai2144 权限控制的 这周能发布吗 搬好小板凳了

[sfai05]

这周能发布吗 + 1

[m17y]

急用啊，不行就造轮子了

[lucaslz2020]

新版本可以自己控制菜单的显示了。@myyyy

[m17y]

@lucasleelz
权限管理这部分还是没找到
１．官方文档无跟新，
３．最新的0.3.1好像并无添加权限控制
２．没有一个明显的地方去说明此模块在哪，
authority-management　此branch不知道是不是你说的新版本

[chenshuai2144]

等待一下
1.0会更新文档

[hardensky]

关注中 正好用到准备自己写来着，那等着官方轮子吧

[chenshuai2144]

这个应该算是完成了吧 #508

[afc163]

• 还需要文档。

[Kanepan]

新项目做技术选型，麻烦大佬们更新下权限相关的文档 ，
多谢了。

[chenshuai2144]

会尽快的

[sillyfeng]

@afc163 @chenshuai2144 看了新的权限管理那块，还没有太明白，个人感觉，菜单和路由应该是没有什么太必然的联系，是可以分开的，现在看的话还是有一些耦合到了一起（可能是我理解的还不太明白的原因），另外想问一下，菜单可以通过什么方式登陆之后从后台取吗？

[afc163]

因为路由需要把菜单名合并进来，用于生成面包屑，避免维护两份文案。

[ddcat1115]

权限文档

这块使用遇到问题，或者有其他建议新开issue讨论吧，这里关掉了

[m9rco]

觉得动态路由还是没有符合预期

[JeremyDa]

关注

[gkendiy]

关注