初識ABP vNext（3）：vue對接ABP基本思路
前言
上一篇介紹了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來實現，你也可以直接在前端部分來做國際化，如果你只有一個前端應用的話，但是在後端做復用性更好一些。
語言切換時只需要把對應的語言名稱放到HTTP Header的accept-language字段就行。
創建項目
在開始編碼前，先創建好前後端的模板項目。
ABP
這裡直接用Abp CLI命令來創建解決方案吧：
abp new "Xhznl.HelloAbp"
-t app
-u none --separate-identity-server
-m none
-d ef -cs "Server=localhost;User Id=sa;Password=Password@2020;Database=HelloAbp;MultipleActiveResultSets=true"
創建一個名為”Xhznl.HelloAbp”的解決方案，使用app作為模板，不需要UI，並且將Identity Server應用程序與API host應用程序分開，使用Entity Framework Core作為數據庫提供程序，並指定連接字符串。創建完成後會得到一個aspnet-core文件夾。
項目結構如下，因為指定了--separate-identity-server參數，所以多了個IdentityServer項目，如果不指定的話它是集成在HttpApi.Host中的。
通常小型系統沒必要把Identity Server應用程序與API host應用程序分開，會增加運維成本，這裡只是為了演示分佈式部署的情況，為後面的微服務做準備。
ABP還支持為每個模塊單獨配置數據庫（如果你不需要分庫，可以忽略以下內容），修改DbMigrator、IdentityServer項目的appsettings.json配置文件：
在ConnectionStrings中添加AbpIdentityServer配置，為Identity Server配置獨立的數據庫連接字符串，不配置的話默認使用Default配置。AbpIdentityServer這個key是來自ABP的IdentityServer模塊中的一個常量，具體請參考源碼。
在開發環境光定義連接字符串還不夠，因為HelloAbpIdsDB數據庫還不存在，需要使用EF Core Code Frist遷移系統創建和維護這個數據庫。新建一個項目：
步驟比較多，具體流程請參考官網：數據庫遷移，這裡就不重複介紹了，你也可以選擇不分庫。
完成以上步驟，最終會生成2個數據庫，並且包含了一些默認的種子數據。
然後驗證一下HttpApi.Host和IdentityServer項目是否可以正常運行，前提是你電腦需要有sqlserver，redis。
HttpApi.Host：
IdentityServer：
vue-element-admin
vue-element-admin的基本使用就不介紹了，相信很多人見過這個，不了解的可以自己去搜索學習一下。
去GitHub下載i18n分支的代碼，或者直接用git clone命令。
在項目根目錄下執行指令：
安裝依賴：npm install
啟動項目：npm run dev
啟動正常的話可以看到這個界面：
最後
本篇先做準備工作，下一篇將從登錄功能開始編碼實現。。。代碼已上傳至GitHub：//github.com/xiajingren/HelloAbp，歡迎star。
