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

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router } from '@angular/router'
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd/message';
import { Base64 } from 'js-base64';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],

})
export class LoginComponent implements OnInit {

  validateForm!: FormGroup;
  constructor(private http: HttpClient, private router: Router, private fb: FormBuilder, private message: NzMessageService) { }

  ngOnInit() {
    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: Base64.decode(localStorage.getItem('account')),
        password: Base64.decode(localStorage.getItem('password'))
      });
      this.remember = true //这一步是回显后让勾选框为选中状态
    }
    //自动登录
    if (localStorage.getItem('isautologin') == 'true') {
      this.submitForm()
      this.autologin = true //这一步是回显后让勾选框为选中状态
    }

  }

  errmsg: string = ''; //错误信息



  // //跳转注册页面
  // toRegister() {
  //   this.router.navigate(['/register'])
  // }


  //记住密码
  rememberInfo() {
    // 判断用户是否勾选记住密码，如果勾选，在本地储存中储存登录信息
    if (this.remember) {
      localStorage.setItem("account", Base64.encode(this.validateForm.value.userName))
      localStorage.setItem("password", Base64.encode(this.validateForm.value.password))
    }
  }
  //自动登录
  autoLogin() {
    if (this.autologin) {
      localStorage.setItem("isautologin", 'true')
    }
  }



  remember: any//记住密码
  autologin: any//自动登录
  isLoading = false;
  messages: any
  encryptedAccessToken: any
  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();
    }
    if (!this.validateForm.valid) {
      this.message.create('error', `请输入账号密码`);
      return
    }
    this.isLoading = true;
    this.http.post('/api/Accounts/SignIn', {
      username: this.validateForm.value.userName,
      password: this.validateForm.value.password
    }).subscribe({
      next: (data: any) => {
        sessionStorage.setItem("token", data.token);
        sessionStorage.setItem("refreshToken", data.refreshToken);
        this.http.get('/api/Accounts/Profile').subscribe({
          next: (data: any) => {
            console.log('登录用户信息', data)
            this.isLoading = false;
            this.rememberInfo()
            this.autoLogin()
            this.router.navigate(['/system'])
            this.message.create('success', `登录成功`);
            sessionStorage.setItem("userData", JSON.stringify(data));
          },
          error: (err) => {
            this.isLoading = false;
          }
        })

      },
      error: (err) => {
        this.isLoading = false;
      }
    })
  }

  forget() {
    this.message.create('warning', `请联系管理员`);
  }
}