Angular4 后台管理系统搭建（8） - 重构angular4 站点。

　　这章介绍下我这几天重构的angular4 站点。咱们最终目标是用angular4作企业级应用的web后台。因此某些功能须要增强。好比更强的权限管理，更自动化的辅助功能。新站点基本上能够知足，能够做为一个基础来扩展。

demo演示地址： http://121.42.203.123      

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 用来定位页面。杜绝用户在前端手动修改任何基础数据。扰乱权限的问题。

 

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