abp angular 和mvc_初识ABP vNext（3）：vue对接ABP基本思路

登录

权限

本地化

创建项目

ABP

vue-element-admin

前言

上一篇介绍了ABP的启动模板以及AbpHelper工具的基本使用，这一篇将进入项目实战部分。因为目前ABP的官方模板只支持MVC和Angular，MVC的话咱.NET开发人员来写还可以，专业前端估计很少会用这个。。。Angular我本人不熟，所以选择vue来做UI。

开始

我使用vue-element-admin[1]来作为模板，这个项目貌似很多人用，选择他的i18n[2]分支，因为我需要国际化功能。在开始编码前，需要先分析几个重要问题：

用户登录/token

用户权限控制

应用程序本地化/语言切换

好在ABP模板提供了Angular版本，我们可以参考Angular版本来做。

登录

因为ABP的授权模块是使用IdentityServer4，所以IdentityServer4的一些默认端点在ABP里也是同样有效的，可以参考下IdentityServer4官网[3]。运行ABP模板项目，看一下IdentityServer4发现文档，uri是：/.well-known/openid-configuration

可以看到token端点是/connect/token，这是IdentityServer4默认的，通过这个端点就可以登录用户获取token。后面请求接口时，把token放到HTTP Header的authorization字段即可。

权限

进入ABP的/swagger界面：

ABP内置了一个/api/abp/appli