前言
随着互联网的发展,越来越多的网站、应用和平台需要用户登录来获取更多信息或完成更多任务。在开发过程中,我们需要为用户提供一个易于操作的登录界面,同时也要对用户的账户安全进行保护。本文介绍的 npm 包 xing-login-angular2,就是一个方便易用、安全可靠的 Angular 2 前端登录组件。
xing-login-angular2 简介
xing-login-angular2 是一个基于 Angular 2 的前端登录组件,用于承担用户注册、登录、忘记密码以及验证等功能。该组件能够实现以下特点:
- 客户端与服务端分离,前端重载依旧保持用户的登录状态。
- 表单自动验证和提交,支持多种登录方式(账号、邮箱、手机号码等)以及第三方应用授权(微信、QQ 等)。
- 视觉效果优美,支持响应式布局,在不同设备上显示较为自然。
安装 xing-login-angular2
在开始之前,我们需要先安装 xing-login-angular2:
- --- ------- ------------------- ------
使用示例
引入 Login 模块
------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------ - ---------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - -------------- - ---- ---------------------- -- -- ------------------- - ----------- ------------- - ------------- -------------- -- -- -------------- -- -------- - -------------- ------------ ----------- -------------- -- -- -------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -
注册 LoginComponent
------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ------------------------------------------- -- - -------------- ------ - -- ------ ----- ------------ --
构造 Login 配置
------ ----- ------------ - - ----- ------------------ -- ---- -- ------ --- -- --- ------ ------- -- ---- ----- --------------- -- ---- ----- - - ----- -------- -- ------- ------ ------ ------- -- - ------ ------ -- ---- ------------ --------- -- ----- ---------- --- -- ------ ---------- --- -- ------ ------ ----------------- -- ------- --------- ----- -- ---- --------- ----- -- -------- ------ ------------ -- ------ -- - ----- ----------- ------ ------- ------------ ---------- ---------- -- ---------- --- ------ ------------ --------- ----- --------- ----- ------ ------- - - -- ------ - -- -------- - - ----- --------- -- ------- ------- ----- - ------ ----- -- ---- ---------- -------------- -- ----- --------- ----- -- ------ -- - ----- --------- ------ ------- ---------- ----------- --------- ----- - -- ---------- - - ----- ------- -- ---- ----- ------------ -- ---- -- - ----- ------- ----- --- - - --
在 LoginComponent 中使用配置
------ - ---------- ------ - ---- ---------------- ------ - ------------ - ---- ----------------- ------------ --------- ---------------------- --------- - ---- ---------------------- ---- ------------------ ---- ------------- ---- ------- ----------- --- ------- ------ ---- --------------------- ------ ------------ ------- ----- ----------- ------ ------ ----- ------------------ -------------------- ---- ------------------ ----------- ---- -- ------------- ------ --------- ---------- ---------- ---- -------------------- ------ ------------------------------------ -------- --------- --- -------- --------- --- ---------- - --------- - ------ - ----------- - ------ --- ------------------------------ ------------------------------ ------------------------------------ -------------------- --------------- ---------------- --- ----------- ------------------------------------ -- ------------------- - ------------ - -- --- -------------------------- ---------------------- --------------------------- ---- ------------------------- ---------------- --- ------------ -- --------- ------- ------------ --------- --------- --------------- --------- -- --------------------------- ---- ------ ------ ---- ------------------------ ------------------------------------------- -- --------------------- -- ---------- -- ------ ------ ---- ------------------- ------- ----------- ------ -- --------------- -------------------- ----------- -------------------------- ------------------------------- ------------ ----------- ------ ------- ---- --------------------- ---- ------------------------------- -------------------- ----- ----------- ---- -- ------------------ -- -------------- --------- ------ --------- ------ ------- ------ ------ ------ ------ -- ------- - - ------------------ - ------- -------- - - - -- ------ ----- -------------- ---------- ------ - ------ --------- ------- - ------ ------ ------------ --- - --- ------ ------- --- - --- ------------- - ----------- - ------------- - ---------- -- ----------------- ---- - ------------- - --------------- - -
结语
xing-login-angular2 是一个功能齐全、易于使用、视觉效果与响应式布局都较好的 Angular 2 前端登录组件。使用该组件能够为用户提供简单易用的登录界面,同时还能提高账户安全性。感兴趣的读者可以访问 GitHub 了解更多信息或者下载组件和示例代码进行学习和使用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055b0b81e8991b448d8b16