在 Angular 中处理两种类型的用户身份验证

Question

我正在开发一个有两类用户的应用程序。根据登录系统的用户类型，它应该允许访问导航栏中的不同页面。对于一种类型的用户，我可以处理。但是对于两种类型的用户，我迷路了。请任何人帮助我

在 auth.service 中，我为两种类型的用户处理登录。用户类型是管理员和员工

auth.service.ts

import { Subject } from 'rxjs';
import { Injectable } from '@angular/core';
import { Admin } from './admin.model';
import { HttpClient } from '@angular/common/http';
import { Employee } from './employee.model';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }

  private Token: string;
  private isAuthenticatedAsAdmin = false;

  private isAuthenticatedAsEmployee = false;

  private authStatusListener = new Subject<boolean>();

  getAdminsToken() {
    return this.Token;
  }

  getAuthStatuesListener() {
    return this.authStatusListener.asObservable();
  }

 
  getIsAuthAsAdmin() {
    return this.isAuthenticatedAsAdmin;
  }


  getIsAuthAsEmployee(){
    return this.isAuthenticatedAsEmployee;
  }


  signInAdmin(
    username: string,
    password: string
  ) {
    const admin: Admin = {
      username: username,
      password: password,
      id: null,
    };
    this.http.post<{ accessToken: string }>('http://localhost:3000/admin/admin-signin', admin)
      .subscribe(response => {
        const token = response.accessToken;
        this.Token = token;
        if (token) {
          this.isAuthenticatedAsAdmin = true;
          this.authStatusListener.next(true);
        }
      });
  }    

  signInEmployee(usename: string, password: string){
    const employee: Employee ={ 
      id:null,
      username: usename,
      password: password,
      salt: null
    };
    this.http.post<{accessToken: string}>('http://localhost:3000/auth/signin', employee)
    .subscribe(response=>{
      const tokenE = response.accessToken;
      this.Token =tokenE;
      if(tokenE){
        this.isAuthenticatedAsEmployee = true;
        this.authStatusListener.next(true);
      }
    })
  }
  
}

在一个组件中，它检查两种类型的用户，同样如下，

navbar.component.ts

import { Subscription } from 'rxjs';
import { AuthService } from './../auth/auth.service';
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit, OnDestroy {
  userIsAuthenticatedAsAdmin =false;
  private authListenerSubs: Subscription;

  constructor(private authservice: AuthService) { }

  ngOnInit() {
    this.authListenerSubs = this.authservice
    .getAuthStatuesListener().subscribe(isAuthenticatedAsAdmin =>{
      this.userIsAuthenticatedAsAdmin = isAuthenticatedAsAdmin;
    });
  }

  ngOnDestroy(){
    this.authListenerSubs.unsubscribe();
  }

}

在ngOnInit中，上面的代码只处理一种类型的用户（上面的代码为管理员处理）。我应该如何处理这两种类型的用户，请提供帮助。

Answer 1

请检查以下代码并根据需要更改组件：

import { Subject } from 'rxjs';
import { Injectable } from '@angular/core';
import { Admin } from './admin.model';
import { HttpClient } from '@angular/common/http';
import { Employee } from './employee.model';

@Injectable({
  providedIn: 'root'
})

export enum userTypeEnum {
    ADMIN = 0,
    EMPLOYEE = 1,
    OTHER = 2
}
export class AuthService {

  constructor(private http: HttpClient) { }

  private Token: string;

  private authStatusListener = new Subject<number>();

  getToken() {
    return this.Token;
  }

  getAuthStatuesListener() {
    return this.authStatusListener.asObservable();
  }

  signInAdmin(
    username: string,
    password: string
  ) {
    const admin: Admin = {
      username: username,
      password: password,
      id: null,
    };
    this.http.post<{ accessToken: string }>('http://localhost:3000/admin/admin-signin', admin)
      .subscribe(response => {
        const token = response.accessToken;
        this.Token = token;
        if (token) {
          this.authStatusListener.next(userTypeEnum.ADMIN);
        }
      });
  }    

  signInEmployee(usename: string, password: string){
    const employee: Employee ={ 
      id:null,
      username: usename,
      password: password,
      salt: null
    };
    this.http.post<{accessToken: string}>('http://localhost:3000/auth/signin', employee)
    .subscribe(response=>{
      const tokenE = response.accessToken;
      this.Token =tokenE;
      if(tokenE){
        this.authStatusListener.next(userTypeEnum.EMPLOYEE);
      }
    })
  }
  
}

在组件中，您必须根据收到的号码进行处理：

import { Subscription } from 'rxjs';
import { AuthService } from './../auth/auth.service';
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit, OnDestroy {
  userType: number = 2; // 2 for other type of user by default
  private authListenerSubs: Subscription;

  constructor(private authservice: AuthService) { }

  ngOnInit() {
    this.authListenerSubs = this.authservice
    .getAuthStatuesListener().subscribe(isAuthenticatedAsAdmin =>{
      this.userType = isAuthenticatedAsAdmin;
    });
  }

  ngOnDestroy(){
    this.authListenerSubs.unsubscribe();
  }

}

在 Angular 中处理两种类型的用户身份验证

Handling two type of user authentication in Angular

jwt

typescript

angular

jwt-auth