[新增]新增保存密码和自动登录

src/app/pages/login/login.component.html

@@ -19,10 +19,19 @@
       </nz-form-item>
 
       <div class="hint">
-        <label nz-checkbox [(ngModel)]="remember">记住密码</label>
+        <nz-form-item style="margin-bottom: 0;">
+          <nz-form-control>
+            <label nz-checkbox formControlName="remember" [(ngModel)]="remember">记住密码</label>
+          </nz-form-control>
+        </nz-form-item>
         <span class="forget" (click)="forget()">忘记密码?</span>
       </div>
-      <label class="autologin" nz-checkbox [(ngModel)]="autologin">自动登陆</label>
+      <nz-form-item style="margin-bottom: 0;">
+        <nz-form-control>
+          <label class="autologin" formControlName="autologin" nz-checkbox [(ngModel)]="autologin">自动登陆</label>
+        </nz-form-control>
+      </nz-form-item>
+
       <button [nzLoading]="isLoading" nz-button class="login-form-button login-form-margin"
         [nzType]="'primary'">登录</button>
     </form>

src/app/pages/login/login.component.scss

@@ -1,7 +1,7 @@
 .login {
   width: 100%;
   height: 100%;
-  background: url('../../../assets/images/bgImg.jpg');
+  background: url('../../../assets/images/bgImg.png');
   background-size: 100% 100%;
   position: relative;
 }
@@ -25,19 +25,22 @@
   color: rgba(255, 255, 255, 1);
 }
 
-label{
+label {
   color: #fff;
 }
+
 .hint {
   display: flex;
   justify-content: space-between;
   margin-bottom: 6px;
+
   .forget {
     cursor: pointer;
     color: #2399FF;
   }
 }
-.autologin{
+
+.autologin {
   margin-bottom: 40px;
 }
 
@@ -66,8 +69,8 @@ p {
 
 .name {
   position: absolute;
-  left: 9.5%;
-  bottom: 48%;
+  left: 10%;
+  bottom: 45%;
 
   img {
     margin-bottom: 32px;
@@ -77,7 +80,8 @@ p {
     font-size: 63px;
     color: #feffff;
     font-weight: 600;
-    text-shadow: 0px 0px 6px #A0C7D8;
+
+    text-shadow: 0px 2px 8px #2399FF;
     letter-spacing: 5px;
     margin-bottom: 0px;
   }

src/app/pages/login/login.component.ts

@@ -22,7 +22,25 @@ export class LoginComponent implements OnInit {
     this.validateForm = this.fb.group({
       userName: [null, [Validators.required]],
       password: [null, [Validators.required]],
+      remember: [null],
+      autologin: [null],
     });
+    //如果本地储存了账号密码信息，那就回显在输入框
+    let account = localStorage.getItem('account')
+    let password = localStorage.getItem('password')
+    if (account && password) {
+      this.validateForm.patchValue({
+        userName: localStorage.getItem('account'),
+        password: localStorage.getItem('password')
+      });
+      this.remember = true //这一步是回显后让勾选框为选中状态
+    }
+    //自动登陆
+    if (localStorage.getItem('isautologin') == 'true') {
+      this.submitForm()
+      this.autologin = true //这一步是回显后让勾选框为选中状态
+    }
+    
   }
 
   errmsg: string = ''; //错误信息
@@ -34,10 +52,39 @@ export class LoginComponent implements OnInit {
     this.router.navigate(['/register'])
   }
 
-  remember:any//记住密码
-  autologin:any//自动登录
+
+  //记住密码
+  rememberInfo() {
+    // 判断用户是否勾选记住密码，如果勾选，在本地储存中储存登录信息
+    if (this.remember) {
+      localStorage.setItem("account", this.validateForm.value.userName)
+      localStorage.setItem("password", this.validateForm.value.password)
+    }
+  }
+  //自动登陆
+  autoLogin() {
+    if (this.autologin) {
+      localStorage.setItem("isautologin", 'true')
+    }
+  }
+
+
+
+
+  remember: any//记住密码
+  autologin: any//自动登录
   isLoading = false;
   submitForm(): void {
+
+    if (!this.remember) {
+      localStorage.removeItem("account")
+      localStorage.removeItem("password")
+    }
+    if(!this.autologin){
+      localStorage.removeItem("isautologin")
+    }
+
+
     for (const i in this.validateForm.controls) {
       this.validateForm.controls[i].markAsDirty();
       this.validateForm.controls[i].updateValueAndValidity();
@@ -59,6 +106,10 @@ export class LoginComponent implements OnInit {
           sessionStorage.setItem('userdata', JSON.stringify(data.result.user))
           sessionStorage.setItem('userdataOfgasstation', JSON.stringify(data.result.user))
           this.isLoading = false;
+          //记住密码
+          this.rememberInfo()
+          //自动登陆
+          this.autoLogin()
           if (data.result.user.userName == 'admin') {
             this.router.navigate(['/system/organization'])
           } else {

src/app/ui/tabbar/tabbar.component.ts

@@ -55,7 +55,9 @@ export class TabbarComponent implements OnInit {
     this.message.create('success', `退出成功`);
     this.token.delete()
     sessionStorage.clear()
-    window.localStorage.clear()
+    // window.localStorage.clear()
+
+    localStorage.removeItem("isautologin")
     this.cookieService.set("token", '', new Date(new Date().getTime() + 1), '/');
     this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/');
     this.router.navigate(['/login'])