4 angular 重构 项目_Angular4 后台管理系统搭建(8) - 重构angular4 站点。

本文介绍了用Angular4重构站点以做企业级应用web后台的过程。包括熟悉项目模块,设计简单权限管理,精确到页面级。还进行前后端两次权限检查,前端获取权限,后端通过拦截器验证,确保系统权限安全,可按业务继续扩展。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这章介绍下我这几天重构的angular4 站点。我们最终目标是用angular4做企业级应用的web后台。所以某些功能需要加强。比如更强的权限管理,更自动化的辅助功能。新站点基本上可以满足,可以作为一个基础来扩展。

demo演示地址: http://114.215.44.2      旧版的站点我转移到  http://114.215.44.2:81

github地址:https://github.com/Vetkdf/yang-location

第一步,熟悉下新项目个个模块的作用

其中 以business开头的文件夹,是和业务相关的。根据业务多少自己扩展。module文件夹内是实体类。里面的文件夹和外面业务相关文件夹有个对应关系。

每个业务文件夹内文件对应关系如下

第二步,简单的权限管理和显示对应

在后台数据库里设计几个表。创建一个很简单的权限管理。权限精确到页面级,不精确到按钮级。即每个页面上明确增删读改四个权限。不区分页面内多个按钮的权限。

所以在angular4站点登录的时候。我们就可以获取用户所在用户组的权限。确定左侧目录树能显示那些模块,和那些页面。也可以全自动的填充导航栏。数据和显示的对应关系如下。

具体代码太多。我不贴了。想要看去github上下载看吧。

第三步,前后端两次权限检查

应为我们把数据都放在前端。很多插件可以更改前端数据。所以在除了可以使用前端的

this.indexNews.pagesNews.D //前端获取当前用户对这个页面是否有删除操作权限,有权限为1 没有权限为0

这样获取当前页面 增删读改  四个权限外。所有和后端 交互的地方,也要检测一次权限。目前通用的做法是在在RESTFUL接口的html头内附件数据,我们也这么做。附加一个 Access-Token

整个系统里,除了登录的get请求不包含。其他所有和后端的交互都要包含这个header附加值。

Access-Token 数值由   token(登录时获取) userid ,pageid 组成。并在和Restful接口交互的时候传递。

这样所有的操作,在服务端可以通过一个拦截器先拦截所有请求。通过Restful的POST, GET,PUT, DELETE。匹配对这个页面权限的 增删读改。 token 和userid用来验证合法性。pageid 用来定位页面。杜绝用户在前端手动修改任何基础数据。扰乱权限的问题。

到目前为止。基本上可以在正式项目内使用了。只要继续按业务扩展就可以。这章没有贴多少代码。应为如果贴代码,那就要贴的太多了。还是下载看吧。

原文:http://www.cnblogs.com/Vetkdf/p/7469852.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值