Tips：本篇已加入系列文章閱讀目錄，可點選檢視更多相關文章。
目錄
- 前言
- 開始
- ABP
- vue-element-admin
- 登入
- 權限
- 本地化
- 建立項目
- 最後
上一篇介紹了ABP的啟動模闆以及AbpHelper工具的基本使用，這一篇将進入項目實戰部分。因為目前ABP的官方模闆隻支援MVC和Angular，MVC的話咱.NET開發人員來寫還可以，專業前端估計很少會用這個。。。Angular我本人不熟，是以選擇vue來做UI。
我使用vue-element-admin來作為模闆，這個項目貌似很多人用，選擇他的i18n分支，因為我需要國際化功能。在開始編碼前，需要先分析幾個重要問題：
- 使用者登入/token
- 使用者權限控制
- 應用程式本地化/語言切換
好在ABP模闆提供了Angular版本，我們可以參考Angular版本來做。
因為ABP的授權子產品是使用IdentityServer4，是以IdentityServer4的一些預設端點在ABP裡也是同樣有效的，可以參考下IdentityServer4官網。運作ABP模闆項目，看一下IdentityServer4發現文檔，uri是：/.well-known/openid-configuration
可以看到token端點是/connect/token，這是IdentityServer4預設的，通過這個端點就可以登入使用者擷取token。後面請求接口時，把token放到HTTP Header的authorization字段即可。
進入ABP的/swagger界面：
ABP内置了一個/api/abp/application-configuration接口，它用于傳回本地化文本，權限和一些系統設定資訊。看一下資料格式：
在auth.policies字段中包含了系統的所有權限，auth.grantedPolicies字段則包含了目前使用者所擁有的權限，因為我現在沒登入是以是空的。通過這兩個字段就可以和vue-element-admin的菜單權限對應起來，實作權限控制。
currentUser字段表示目前使用者資訊，沒登入時就是空的，isAuthenticated為false，這個字段也可以作為使用者是否登入（token是否有效）的判斷依據。
本地化對于大部分的小型系統可能都用不上，不過ABP作為一個優秀且全面的架構，必然會支援本地化功能。同樣的，本地化資訊也可以通過/api/abp/application-configuration接口來擷取：
localization.languages字段表示系統所支援的語言類型，前端的語言切換選項就可以使用這個字段。
localization.values字段就是本地化的文本資訊了，你在後端配置的本地化文本都可以從這裡擷取到，通過這個字段結合vue-element-admin的國際化功能，就可以讓你的系統支援多語言。vue-element-admin的國際化方案是通過 vue-i18n來實作，你也可以直接在前端部分來做國際化，如果你隻有一個前端應用的話，但是在後端做複用性更好一些。