目錄

前言開始登入許可權本地化建立專案ABPvue-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來實現，你也可以直接在前端部分來做國際化，如果你只有一個前端應用的話，但是在後端做複用性更好一些。

語言切換時只需要把對應的語言名稱放到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：https://github.com/xiajingren/HelloAbp 歡迎star。

原文地址：https://www.cnblogs.com/xhznl/p/13508356.html