如何将我的Angular 10应用程序与C#(包含PostgreSQL连接)连接

Question

我在C#类中创建了一个Angular 10登录应用程序和一个postgreSQL连接。我创建的项目是一个ASP。NET核心Web应用程序。我的Angular项目与C#项目在同一个项目中，如下所示：

项目结构

这是我连接到PostgreSQL数据库的Model.cs文件：

using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
namespace Model
{
public class UserContext : DbContext
{ 
public DbSet<Employee> Employees { get; set; }
public DbSet<Admin> Admins { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
optionsBuilder.UseNpgsql("UserID=postgres;Password=niyu;Host=localhost;Port=5432;Database=UserDB;Pooling=true;");
}
protected override void OnModelCreating(ModelBuilder modelBuilder){
modelBuilder.Entity<Employee>()
.HasKey(t => t.UserID);
modelBuilder.Entity<Admin>()
.HasKey(t => t.UserID);
}
public class Employee
{
public string UserID { get; set; }
public string Password { get; set; }
}
public class Admin
{
public string UserID { get; set; }
public string Password { get; set; }
}
}
}

目前，我有两个模拟用户(一个普通用户和一个管理员(可以登录我的应用程序。我的登录数据：

export class SignInData {
private userID: string;
private password: string;
constructor(userID: string, password: string){
this.userID = userID;
this.password = password;
}
getUserID(): string
{
return this.userID;
}
getPassword(): string
{
return this.password;
}
}

我的登录验证服务：

import { Injectable } from '@angular/core';
import { SignInData } from 'src/SignInData';
@Injectable({
providedIn: 'root'
})
export class LoginauthenticationService {
private readonly mockedUser = new SignInData('user1', '123');
private readonly mockedAdmin = new SignInData('admin1', '456');
isAuthenticated = false;
constructor() { }
Authenticate(SignInData: SignInData, selectedRole: string): boolean {
if (this.CheckLoginDetails(SignInData, selectedRole)) {
this.isAuthenticated = true;
return true;
}
this.isAuthenticated = false;
return false;
}
private CheckLoginDetails(SignInData: SignInData, selectedRole: string): boolean {
return this.CheckUserID(SignInData.getUserID(), selectedRole) && this.CheckPassword(SignInData.getPassword(), selectedRole);
}
private CheckUserID(userID: string, selectedRole: string): boolean {
if (selectedRole === 'User') {
return userID === this.mockedUser.getUserID();
}
else{
return userID === this.mockedAdmin.getUserID();
}
}
private CheckPassword(password: string, selectedRole: string): boolean {
if (selectedRole === 'User') {
return password === this.mockedUser.getPassword();
}
else{
return password === this.mockedUser.getUserID();
}
}
}

最后是我的登录组件：

import { Component, ElementRef, Input, OnInit, ViewChild, NgModule } from '@angular/core';
import {NgForm} from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import {MatRadioModule} from '@angular/material/radio';
import { stringify } from 'querystring';
import {BrowserModule} from '@angular/platform-browser';
import { LoginauthenticationService } from "../loginauthentication.service";
import { SignInData } from 'src/SignInData';
import { UserpageComponent } from '../userpage/userpage.component';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private router: Router, private loginAuthenticationService: LoginauthenticationService)  { }
ngOnInit(): void {
}
alertmessage = false;
selectedRole='User';
userID = '';
password = '';

RoleSelection(role){
this.selectedRole = role;
}
Login(){
const logindata = new SignInData(this.userID, this.password)
if(this.selectedRole === 'User' && this.loginAuthenticationService.Authenticate(logindata, this.selectedRole)){
this.router.navigate(['/userpage'])

}
else if (this.selectedRole === 'Admin' && this.loginAuthenticationService.Authenticate(logindata, this.selectedRole)){
this.router.navigate(['/adminpage'])
}
else{
this.alertmessage = true;
}
}
GoToRegistration()
{
this.router.navigate(['/registration'])
}
}

现在，我希望能够连接到PostgreSQL数据库，并从那里检索用户ID和密码，而不是从我的mockusers(如我的登录身份验证服务中所示(。我从未将数据库连接到Angular，现在我分别有前端(Angular(和后端(C#(，我想知道如何连接这两者。

Answer 1

请参阅StacklitzDemo

你需要在你的项目中使用以下内容：

1-拦截器一种用于请求处理(如标头和令牌(以及错误的服务

2-HttpClientModule用于从后端请求api的服务