首頁>技術>

目錄

前言開始登入許可權本地化建立專案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

  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 網路程式設計Netty IoT百萬長連線優化,萬字長文精講