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 用來定位頁面。杜絕用戶在前端手動修改任何基礎數據。擾亂權限的問題。

 

到目前爲止。基本上能夠在正式項目內使用了。只要繼續按業務擴展就能夠。這章沒有貼多少代碼。應爲若是貼代碼，那就要貼的太多了。仍是下載看吧。