• 宝安水环境管控平台（Ionic/Angular 移动端） 问题记录

    目录

    一. 登录前的验证码校验功能

    1. 添加滑动校验 Angular 组件

    1.1 verifySlipping.component.html

    1.2 verifySlipping.component.css

    1.3 verifySlipping.component.ts

    1.4 verify.js

    1.5 aes-encrypt-decrypt.ts

    1.6 verify.service.ts

    2. 添加登录时的验证码校验逻辑

    2.1 保持 loginService 服务为单例，避免路由守卫出 bug

    2.2 获取密钥时，Angular Http 请求发送失败 

    2.3 点击登录按钮，初始化验证码

    2.4 初始化验证码

    2.5 验证码校验成功后 执行真正的登录

    2.6 效果展示

    二. 修改密码功能

    1. 进入页面后，加密登录名，获取新密钥

    2. 校验密码，要求包含大小写字母、数字、特殊字符

    3. 修改密码，传参格式 FORM['USER_ID'] 的写法

    一. 登录前的验证码校验功能

    验证码校验功能参考开源项目 AJ-Captcha

    将验证码功能，嵌入你的项目里，需要添加以下依赖：

    yarn add crypto-js

    yarn add jwt-decode

    yarn add jquery

    1. 添加滑动校验 Angular 组件

    AJ-Captcha: 行为验证码(滑动拼图、点选文字)，前后端(java)交互，包含vue/h5/Android/IOS/flutter/uni-app/react/php/微信小程序的源码和实现https://gitee.com/anji-plus/captcha

    三点说明：

    • 我下载了上面仓库中的 Angular 前端示例，使用 ng serve 运行项目
    • 此示例和我项目中的实际逻辑，区别较大，我几乎只用到了组件
    • 需要参考的前提：项目后端系统已经配备了相应后端接口

    下面介绍下验证码组件相关内容

    1.1 verifySlipping.component.html

    注释掉的部分：验证码提示框的头部，一般情况下用不上，会导致显示混乱

    此处需要注意两个ID，这俩 ID 在组件中会被 jquery 操作控制显隐：

    • mpanel1：用于盛放验证码图片、拼图、滑块之类的容器
    • slipping：用于标识这是 滑动校验组件，不是 点选文字校验组件

    文件地址：src\app\components\verify\verifySlipping.component.html

    1. <div
    2.   class="modal fade"
    3.   id="slipping"
    4.   tabindex="-1"
    5.   role="dialog"
    6.   aria-labelledby="myLargeModalLabel"
    7. >
    8.   <div class="modal-dialog modal-dialog-centered" role="document">
    9.     <div class="modal-content">
    10.       
    11.  
    12.       <div class="modal-body">
    13.         <div class="box">
    14.           <div class="verifybox-top">
    15.             <div class="box">
    16.               <div id="mpanel1">div>
    17.             div>
    18.           div>
    19.         div>
    20.       div>
    21.     div>
    22.   div>
    23. div>

    1.2 verifySlipping.component.css

    验证码弹框组件的基本样式

    注意：验证码弹框的宽度是写死的，这会导致屏幕小的手机，显示不全验证码弹框

    由于时间紧促，我没研究改哪些宽度百分比，而是直接使用了 scale(0.85) 缩小移动端弹框

    文件地址：src\app\components\verify\verifySlipping.component.css

    1. .btn {
    2.   border: none;
    3.   outline: none;
    4.   width: 300px;
    5.   height: 40px;
    6.   line-height: 40px;
    7.   text-align: center;
    8.   cursor: pointer;
    9.   background-color: #409eff;
    10.   color: #fff;
    11.   font-size: 16px;
    12.   letter-spacing: 1em;
    13. }
    14.  
    15. .modal-dialog {
    16.   width: 466px;
    17. }

    global.scss 下，补充了全局验证码弹框样式

    之前打算使用 important 强行覆盖 jq 动态写入的验证码弹框宽度，后来因为要修改的地方太多，懒得改了，所以采用了 transform: translate(-50%, -50%) scale(0.85);

    文件地址：src\global.scss

    1. /**
    2.  * 安全验证
    3. */
    4. .verify-code {
    5.   font-size: 20px;
    6.   text-align: center;
    7.   cursor: pointer;
    8.   margin-bottom: 5px;
    9.   border: 1px solid #ddd;
    10. }
    11.  
    12. .cerify-code-panel {
    13.   height: 100%;
    14.   overflow: hidden;
    15. }
    16.  
    17. .verify-code-area {
    18.   float: left;
    19. }
    20.  
    21. .verify-input-area {
    22.   float: left;
    23.   width: 60%;
    24.   padding-right: 10px;
    25. }
    26.  
    27. .verify-change-area {
    28.   line-height: 30px;
    29.   float: left;
    30. }
    31.  
    32. .varify-input-code {
    33.   display: inline-block;
    34.   width: 100%;
    35.   height: 25px;
    36. }
    37.  
    38. .verify-change-code {
    39.   color: #337ab7;
    40.   cursor: pointer;
    41. }
    42.  
    43. .verify-btn {
    44.   width: 200px;
    45.   height: 30px;
    46.   background-color: #337ab7;
    47.   color: #ffffff;
    48.   border: none;
    49.   margin-top: 10px;
    50. }
    51.  
    52. .verifybox {
    53.   position: relative;
    54.   box-sizing: border-box;
    55.   border-radius: 2px;
    56.   background-color: #fff;
    57.   left: 50%;
    58.   top: 50%;
    59.   transform: translate(-50%, -50%) scale(0.85);
    60. }
    61. .verifybox-top {
    62.   padding: 0 15px;
    63.   /* height: 50px; */
    64.   line-height: 50px;
    65.   text-align: left;
    66.   font-size: 16px;
    67.   color: #45494c;
    68.   box-sizing: border-box;
    69. }
    70. .verifybox-bottom {
    71.   padding: 15px;
    72.   box-sizing: border-box;
    73. }
    74. .verifybox-close {
    75.   position: absolute;
    76.   top: 13px;
    77.   right: 9px;
    78.   width: 24px;
    79.   height: 24px;
    80.   line-height: 24px;
    81.   text-align: center;
    82.   cursor: pointer;
    83. }
    84. .mask {
    85.   position: fixed;
    86.   top: 0;
    87.   left: 0;
    88.   z-index: 1001;
    89.   width: 100%;
    90.   height: 100vh;
    91.   background: rgba(0, 0, 0, 0.3);
    92.   /* display: none; */
    93.   transition: all 0.5s;
    94.   display: none;
    95. }
    96.  
    97. .verify-tips {
    98.   position: absolute;
    99.   display: none;
    100.   left: 0px;
    101.   bottom: -35px;
    102.   width: 100%;
    103.   height: 30px;
    104.   /* transition: all .5s; */
    105.   line-height: 30px;
    106.   color: #fff;
    107.   /* animation:move 1.5s linear; */
    108. }
    109.  
    110. @keyframes move {
    111.   0% {
    112.     bottom: -35px;
    113.   }
    114.   50%,
    115.   80% {
    116.     bottom: 0px;
    117.   }
    118.   100% {
    119.     bottom: -35px;
    120.   }
    121. }
    122.  
    123. .suc-bg {
    124.   background-color: rgba(92, 184, 92, 0.5);
    125.   filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
    126. }
    127. .err-bg {
    128.   background-color: rgba(217, 83, 79, 0.5);
    129.   filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
    130. }
    131.  
    132. /*滑动验证码*/
    133. .verify-bar-area {
    134.   position: relative;
    135.   background: #ffffff;
    136.   text-align: center;
    137.   -webkit-box-sizing: content-box;
    138.   -moz-box-sizing: content-box;
    139.   box-sizing: content-box;
    140.   border: 1px solid #ddd;
    141.   -webkit-border-radius: 4px;
    142. }
    143.  
    144. .verify-bar-area .verify-move-block {
    145.   position: absolute;
    146.   top: 0px;
    147.   left: 0;
    148.   background: #fff;
    149.   cursor: pointer;
    150.   -webkit-box-sizing: content-box;
    151.   -moz-box-sizing: content-box;
    152.   box-sizing: content-box;
    153.   box-shadow: 0 0 2px #888888;
    154.   -webkit-border-radius: 1px;
    155. }
    156.  
    157. .verify-bar-area .verify-move-block:hover {
    158.   background-color: #337ab7;
    159.   color: #ffffff;
    160. }
    161.  
    162. .verify-bar-area .verify-left-bar {
    163.   position: absolute;
    164.   top: -1px;
    165.   left: -1px;
    166.   background: #f0fff0;
    167.   cursor: pointer;
    168.   -webkit-box-sizing: content-box;
    169.   -moz-box-sizing: content-box;
    170.   box-sizing: content-box;
    171.   border: 1px solid #ddd;
    172. }
    173.  
    174. .verify-img-panel {
    175.   margin: 0;
    176.   -webkit-box-sizing: content-box;
    177.   -moz-box-sizing: content-box;
    178.   box-sizing: content-box;
    179.   border: 1px solid #ddd;
    180.   border-radius: 3px;
    181.   position: relative;
    182. }
    183.  
    184. .verify-img-panel .verify-refresh {
    185.   width: 25px;
    186.   height: 25px;
    187.   text-align: center;
    188.   padding: 5px;
    189.   cursor: pointer;
    190.   position: absolute;
    191.   top: 0;
    192.   right: 0;
    193.   z-index: 2;
    194. }
    195.  
    196. .verify-img-panel .icon-refresh {
    197.   font-size: 20px;
    198.   color: #fff;
    199. }
    200.  
    201. .verify-img-panel .verify-gap {
    202.   background-color: #fff;
    203.   position: relative;
    204.   z-index: 2;
    205.   border: 1px solid #fff;
    206. }
    207.  
    208. .verify-bar-area .verify-move-block .verify-sub-block {
    209.   position: absolute;
    210.   text-align: center;
    211.   z-index: 3;
    212.   /* border: 1px solid #fff; */
    213. }
    214.  
    215. .verify-bar-area .verify-move-block .verify-icon {
    216.   font-size: 18px;
    217. }
    218.  
    219. .verify-bar-area .verify-msg {
    220.   z-index: 3;
    221. }
    222.  
    223. /* 字体图标的css */
    224. @font-face {
    225.   font-family: "iconfont";
    226.   src: url("./assets/font/iconfont.eot?t=1508229193188"); /* IE9*/
    227.   src: url("./assets/font/iconfont.eot?t=1508229193188#iefix")
    228.       format("embedded-opentype"),
    229.     /* IE6-IE8 */
    230.       url("data:application/x-font-woff;charset=utf-8;base64,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")
    231.       format("woff"),
    232.     url("./assets/font/iconfont.ttf?t=1508229193188") format("truetype"),
    233.     /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    234.       url("./assets/font/iconfont.svg?t=1508229193188#iconfont") format("svg"); /* iOS 4.1- */
    235. }
    236.  
    237. .iconfont {
    238.   font-family: "iconfont" !important;
    239.   font-size: 16px;
    240.   font-style: normal;
    241.   -webkit-font-smoothing: antialiased;
    242.   -moz-osx-font-smoothing: grayscale;
    243. }
    244.  
    245. .icon-check:before {
    246.   content: "\e645";
    247. }
    248.  
    249. .icon-close:before {
    250.   content: "\e646";
    251. }
    252.  
    253. .icon-right:before {
    254.   content: "\e6a3";
    255. }
    256.  
    257. .icon-refresh:before {
    258.   content: "\e6a4";
    259. }

    1.3 verifySlipping.component.ts

    官网示例中，初始化验证码是在组件里进行的

    但是，我的项目在 初始化验证码请求图片 时，需要传入额外的参数；因此，我注释了组件内的 初始化验证码 逻辑

    文件地址：src\app\components\verify\verifySlipping.component.ts

    1. import { Component } from '@angular/core';
    2. import './verify/verify.js';
    3.  
    4. @Component({
    5.   selector: 'verify-slipping',
    6.   templateUrl: './verifySlipping.component.html',
    7.   styleUrls: ['./verifySlipping.component.css'],
    8. })
    9. export class verifySlippingComponent {
    10.   /**
    11.    * 页面初始化
    12.    */
    13.   ngOnInit(): void {
    14.     // 引入 promise
    15.     if (!window.Promise) {
    16.       document.writeln(
    17.         '