初识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。