abp＆ng-alain 改造前端三——登录页面改造

介绍

ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称，网址:http://aspnetboilerplate.com/。ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)

目录:https://www.jianshu.com/p/589af988637c

源代码:https://github.com/ZhaoRd/abp-alain

路由守护

路由守护的功能，是在定义ng路由的时候，添加一个条件，判断当前登录信息是否能够进行正常的路由调整。打开文件 ，导入 ，

修改 路径，添加内容如下

添加路由守护之后，在打开项目首页，会发现自动界面会自动跳转到登录页面

登录界面主要元素

登录界面主要有三处主要元素：租户切换、登录框、多语言切换

租户切换：更改当前租户信息

登录框：账号和密码区域

多语言切换：修改当前页面多语言信息

多语言切换

如下图所示，在界面上，有一系列的语言列表，点击国家旗帜，即可跳转到对应的语言

将angular项目中的 相关文件copy到 中，目录结构

修改 文件，修改完毕后的内容如下：

只有采用该方式，语言列表才会显示

修改 ，只要修改selector即可，修改完毕的内容如下

修改布局文件 ，修改完毕代码如下

租户切换

租户切换的界面如下

使用的文件如下图

修改 ，内容如下

修改 ，内容如下

修改 ，内容如下

修改 ，内容如下

在 layout.module中导入这两个组件

注意组件 ,由于该组件是动态弹出框，所以需要添加在 中，关于动态加载的弹出框，在后面的篇幅会介绍。

修改布局界面，导入切换租户组件

运行结果

租户切换

语言切换

总结

abp自带项目angular中，多语言的切换和租户的切换，是登录界面上进行操作的，其本质是将租户信息和多语言信息存储到cookie中，我们使用abp组件的功能，修改abp组件，符合ng-alain项目的样式即可实现。通过修改组件也发现，ng-alain在组件命名方面是由规范的，主要组件，需要用 等前缀。

我的公众号

源代码

源代码:https://github.com/ZhaoRd/abp-alain