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

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來實現，你也能夠直接在前端部分來作國際化，若是你只有一個前端應用的話，可是在後端作複用性更好一些。

語言切換時只須要把對應的語言名稱放到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。