初識ABP vNext（3）：vue對接ABP基本思路

xhznl發表於2020-08-17

Tips：本篇已加入系列文章閱讀目錄，可點選檢視更多相關文章。

前言

上一篇介紹了ABP的啟動模板以及AbpHelper工具的基本使用，這一篇將進入專案實戰部分。因為目前ABP的官方模板只支援MVC和Angular，MVC的話我們.NET開發人員來寫還可以，專業前端估計很少會用這個。。。Angular我本人不熟，所以選擇vue來做UI。

開始

我使用vue-element-admin來作為模板，這個專案貌似很多人用，選擇他的i18n分支，因為我需要國際化功能。在開始編碼前，需要先分析幾個重要問題：

使用者登入/token
使用者許可權控制
應用程式本地化/語言切換

好在ABP模板提供了Angular版本，我們可以參考Angular版本來做。

許可權

進入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遷移系統建立和維護這個資料庫。新建一個專案：