Sinopec-Anxin/src/app/pages/login/login.component.ts

import { Component, OnInit, AfterViewInit, ViewChild, TemplateRef } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router, ActivatedRoute } from '@angular/router'
import { CacheTokenService } from '../../service/cache-token.service'//引入服务
import { CookieService } from 'ngx-cookie-service';//cookie插件
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd/message';
import { Base64 } from 'js-base64';
import { NzNotificationService } from 'ng-zorro-antd/notification';

declare var abp: any
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],

})
export class LoginComponent implements OnInit {

  validateForm!: FormGroup;
  @ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>;
  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, private cookieService: CookieService, private fb: FormBuilder, private message: NzMessageService, private notificationService: NzNotificationService) { }

  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
  encryptedAccessToken
  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/TokenAuth/Authenticate', {
      userNameOrEmailAddress: this.validateForm.value.userName,
      password: this.validateForm.value.password
    }).subscribe(
      (data: any) => {
        sessionStorage.setItem("token", data.result.accessToken);
        this.cookieService.set("token", data.result.accessToken, null, '/');
        this.cookieService.set("refreshToken", data.result.encryptedAccessToken, null, '/');
        this.encryptedAccessToken = data.result.encryptedAccessToken
        console.log('token', data)
        this.http.get('/api/services/app/Session/GetCurrentLoginInformations').subscribe((data: any) => {
          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') {
            sessionStorage.setItem("isGasStation", 'false');
            this.router.navigate(['/system/organization'])
          } else {
            if (data.result.user.organization.isGasStation) {
              sessionStorage.setItem("isGasStation", 'true');
              this.router.navigate(['/warning/petrolStation'])
            } else {
              sessionStorage.setItem("isGasStation", 'false');
              this.router.navigate(['/plan'])
            }
          }
          this.message.create('success', `登陆成功`);

          function loadScript(url, callback) {
            var s: any = document.createElement('script');
            s.type = 'text/javascript';
            if (s.readyState) {
              s.onreadystatechange = function () {  //兼容IE
                if (s.readyState == 'complete' || s.readyState == 'loaded') {
                  callback();
                }
              }
            } else {
              s.onload = function () {  //safari chrome opera firefox
                callback();
              }
            }

            s.src = url;
            document.head.appendChild(s);
          }
          let _this = this;
          loadScript('./assets/js/abp.signalr-client.js', () => {
            abp.signalr = {
              autoConnect: true,
              connect: undefined,
              hubs: undefined,
              qs: "enc_auth_token" + "=" + encodeURIComponent(_this.encryptedAccessToken),
              remoteServiceBaseUrl: "http://39.106.78.171:8906",
              url: '/signalr'
            };

            //手动实现hub
            //this.hubConnection = new signalR.HubConnectionBuilder()
            //    .withUrl('/signalr-violation',
            //        {
            //            accessTokenFactory: ()=>this.token
            //        }
            //    )
            //    .build();
            ////服务器回调方法
            //this.hubConnection.on('SendViolation', (data) => {
            //    console.log("SendViolation", data);
            //    _this.messages.push("SendViolation:"+JSON.stringify(data));
            //});
            //this.hubConnection.start();

            //abp封装的hub
            abp.event.on('abp.notifications.received', function (userNotification) {
              _this.messages.push("abp.notifications.received:" + JSON.stringify(userNotification));
              console.log('abp.notifications.received成功收到了哈哈哈', userNotification);
            });
          })

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

        //调用服务中的function刷新token
        // this.token.startUp()
      },
      (err) => {
        this.isLoading = false;
        this.message.create('error', err.error.error.details);
      }
    )
  }

  receiptOfNotification() {
    this.notificationService.template(this.template!, { nzPlacement: 'bottomRight', nzClass: 'receiptOfNotification', nzDuration: 0 });
  }

  roleList = [
    '管理员', '职工'
  ]

  selectedRole: string
  selecteRole(role) {
    this.selectedRole = role
  }
  forget() {
    this.message.create('warning', `请联系管理员`);
  }
}