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来实现，你也可以直接在前端部分来做国际化，如果你只有一个前端应用的话，但是在后端做复用性更好一些。