[开源]OSharpNS 步步为营系列 - 5. 添加前端Angular模块 (5)

NG-ALAIN 的 ACL 模块的权限控制判断依赖可为 角色功能点,默认的设置中,角色数据类型是字符串,功能点数据类型是数值。OSharp的功能点是形如 Root.Admin.Blogs.Post 的字符串形式,要应用上 ACL,需要进行如下配置:

src/app/delon.module.ts 文件的 fnDelonACLConfig() 函数中进行配置

export function fnDelonACLConfig(): DelonACLConfig { return { guard_url: '/exception/403', preCan: (roleOrAbility: ACLCanType) => { function isAbility(val: string) { return val && val.startsWith('Root.'); } // 单个字符串,可能是角色也可能是功能点 if (typeof roleOrAbility === 'string') { return isAbility(roleOrAbility) ? { ability: [roleOrAbility] } : { role: [roleOrAbility] }; } // 字符串集合,每项可能是角色或是功能点,逐个处理每项 if (Array.isArray(roleOrAbility) && roleOrAbility.length > 0 && typeof roleOrAbility[0] === 'string') { let abilities: string[] = [], roles: string[] = []; let type: ACLType = {}; (roleOrAbility as string[]).forEach((val: string) => { if (isAbility(val)) abilities.push(val); else roles.push(val); }); type.role = roles.length > 0 ? roles : null; type.ability = abilities.length > 0 ? abilities : null; return type; } return roleOrAbility; } } as DelonACLConfig; } 组件权限控制 组件中的权限控制

组件中的权限通常是按钮权限,例如:

列表行操作按钮:
通过 acl 控制功能权限,iif 控制数据权限,共同决定一个按钮是否可用。

{ text: '编辑', icon: 'edit', {==acl: 'Root.Admin.Blogs.Post.Update'==}, {==iif: row => row.Updatable==}, click: row => this.edit(row) }, 组件模板的权限控制

组件模板中各个 html 元素,都可以进行权限控制:

按钮权限:

<button nz-button (click)="create()" {==acl="Root.Admin.Blogs.Post.Create"==}><i nz-icon type="plus-circle" theme="outline"></i>新增</button> 路由权限控制

路由的权限控制,通过 守卫路由 来实现,如果当前用户没有权限访问指定的路由链接,将会被拦截,未登录的用户将跳转到登录页,已登录的用户将跳转到 403 页面。

配置路由权限控制很简单,需要使用守卫路由 [ACLGuard] ,然后在路由的 data 中配置 guard 为需要的功能点字符串:

{ path: 'blog', component: BlogComponent, {==canActivate: [ACLGuard]==}, data: { title: '博客管理', reuse: true, {==guard: 'Root.Admin.Blogs.Blog.Read'==} } }, 菜单权限控制

菜单数据上也可以配置ACL权限控制,没权限的菜单不会显示

{ "text": "博客模块", "group": "true", "icon": "anticon-border", "acl": "Root.Admin.Blogs", "children": [{ "text": "博客管理", "link": "/blogs/blog", "acl": "Root.Admin.Blogs.Blog" }, { "text": "文章管理", "link": "/blogs/post", "acl": "Root.Admin.Blogs.Post" }] } 权限控制效果演示 博客信息

根据博客模块需求分析的设定,博客管理员博主 两个角色对 博客 的权限分别如下:

-- 博客管理员 博主
查看      
申请      
审核      
修改      
博主-博客

博主只能查看自己的博客数据,能申请博客,不能审核博客,申请成功之后,申请按钮隐藏。

[开源]OSharpNS 步步为营系列 - 5. 添加前端Angular模块

博客管理员-博客

博客管理员不能申请博客,可以审核新增的博客,博客审核通过之后不能再次审核。

[开源]OSharpNS 步步为营系列 - 5. 添加前端Angular模块

文章信息

根据博客模块需求分析的设定,博客管理员博主 两个角色对 文章 的权限分别如下:

-- 博客管理员 博主
查看      
新增      
修改      
删除      
博主-文章

博主能新增文章,只能查看、更新、删除自己的文章

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyjywx.html