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

【问题标题】：Handling two type of user authentication in Angular在 Angular 中处理两种类型的用户身份验证
【发布时间】：2020-11-16 22:21:50
【问题描述】：

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

在 auth.service 中，我为两种类型的用户处理登录。用户类型为 admin 和 employee

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 中，上面的代码只处理一种类型的用户（上面的代码为管理员处理）。我应该如何处理这两种类型的用户，请帮忙。

【问题讨论】：

如果一次只有一种类型的用户（管理员或员工）可以登录，那么为什么要使用两个不同的属性来存储令牌并处理单独的标志来检查员工或管理员？
@Tejeshree - 可以使用一个标签。我会修复它。但是我怎样才能确定谁在没有两个单独标志的情况下登录了
您可以使用 isAuthenticatedAsAdmin 标志 - 如果为 true，则表示它是管理员，并在员工块中设置此 false，这将暗示这是员工而不是管理员。同样，监听器可以设置为真或假，在这种情况下建议更改监听器的名称。
@Tejeshree -对不起，我提供的数据较少，有第三个用户没有登录系统。因此，当没有人登录时，即视为第三用户。
如果我使用数字而不是布尔值(private isAuthenticated: number)，是否有助于我验证用户？

标签： angular typescript jwt jwt-auth

【解决方案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();
  }

}

【讨论】：