pc网站怎么做,公司简介英文怎么说,潍坊点睛做网站怎么样,缪斯国际设计董事长点击上方蓝字小黑在哪里关注我吧登录权限本地化创建项目ABPvue-element-admin前言上一篇介绍了ABP的启动模板以及AbpHelper工具的基本使用#xff0c;这一篇将进入项目实战部分。因为目前ABP的官方模板只支持MVC和Angular#xff0c;MVC的话咱.NET开发人员来写还… 点击上方蓝字小黑在哪里关注我吧登录权限本地化创建项目ABPvue-element-admin前言上一篇介绍了ABP的启动模板以及AbpHelper工具的基本使用这一篇将进入项目实战部分。因为目前ABP的官方模板只支持MVC和AngularMVC的话咱.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/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[4]来实现你也可以直接在前端部分来做国际化如果你只有一个前端应用的话但是在后端做复用性更好一些。语言切换时只需要把对应的语言名称放到HTTP Header的accept-language字段就行。创建项目在开始编码前先创建好前后端的模板项目。ABP这里直接用Abp CLI命令来创建解决方案吧abp new Xhznl.HelloAbp
-t app
-u none --separate-identity-server
-m none
-d ef -cs Serverlocalhost;User Idsa;PasswordPassword2020;DatabaseHelloAbp;MultipleActiveResultSetstrue
创建一个名为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迁移系统创建和维护这个数据库。新建一个项目步骤比较多具体流程请参考官网数据库迁移[5]这里就不重复介绍了你也可以选择不分库。完成以上步骤最终会生成2个数据库并且包含了一些默认的种子数据。然后验证一下HttpApi.Host和IdentityServer项目是否可以正常运行前提是你电脑需要有sqlserverredis。HttpApi.HostIdentityServervue-element-adminvue-element-admin的基本使用就不介绍了相信很多人见过这个不了解的可以自己去搜索学习一下。去GitHub下载i18n[6]分支的代码或者直接用git clone命令。在项目根目录下执行指令安装依赖npm install启动项目npm run dev启动正常的话可以看到这个界面最后本篇先做准备工作下一篇将从登录功能开始编码实现。。。代码已上传至GitHubhttps://github.com/xiajingren/HelloAbp欢迎star。参考资料[1]vue-element-admin: https://github.com/PanJiaChen/vue-element-admin[2]i18n: https://github.com/PanJiaChen/vue-element-admin/tree/i18n[3]IdentityServer4官网: https://identityserver4.readthedocs.io/[4]vue-i18n: https://github.com/kazupon/vue-i18n[5]数据库迁移: https://docs.abp.io/zh-Hans/abp/latest/Entity-Framework-Core-Migrations#使用多个数据库[6]i18n: https://github.com/PanJiaChen/vue-element-admin/tree/i18n如果本文对您有用不妨点个“在看”或者转发朋友圈支持一下
