將 ID 從一個組件導出到 angular 中的另一個組件

Question

我正在研究 angular 中的一段代碼，這是書籍管理。 我正在使用這個托管 JSON 數據。 當用戶登錄時，我需要導出“id”而不是從登錄組件到願望列表組件的郵件。

數據.json

{
  "Users": [
    {
      "id": 1,
      "userName": "Deepak Sharma",
      "Password": "dep@123!",
      "Phone": "9988776655",
      "Email": "Deepak@gmail.com",
      "UserType": "Customer",
      "WishList": [ 1, 2, 3 ],
      "Completed": [4, 5, 6 ]
    },
    {
      "username": "val1",
      "Password": "val1",
      "Phone": 123,
      "Email": "val1@gmail.com",
      "WishList": [],
      "Completed": [],
      "id": 3
    }
  ]
}

登錄頁面.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';


@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.css']
})
export class LoginPageComponent implements OnInit {

  public loginForm!: FormGroup;
  static emailId: any;
  static emailIdUserGave: any;
  constructor(private formBuilder : FormBuilder, private http: HttpClient, private router: Router) { }

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      Email: ['', Validators.required],
      Password: ['', Validators.required]
    })
  }

  login(){
    this.http.get<any>("http://localhost:3500/Users")
    .subscribe(res=>{
      const user = res.find((a:any) =>{
        return a.email === this.loginForm.value.email && a.password === this.loginForm.value.password
      });
      if (user) {
        alert("Login Success!");
        this.loginForm.reset();
        let emailIdUserGave = this.loginForm.value.email; 
        //Variable I want to export ifincase id dosen't export
        this.router.navigate(['user'])
      } else {
        alert("User Not found. Create account !!");
      }
    }, err=>{
      alert("Something Went Wrong");
    })
  }

}

我想從 login-page.component.ts 導出 ID 到這個 wish-list.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { LoginPageComponent } from '../login-page/login-page.component';

@Component({
  selector: 'app-wishlist-page',
  templateUrl: './wishlist-page.component.html',
  styleUrls: ['./wishlist-page.component.css']
})
export class WishlistPageComponent implements OnInit {
  
  constructor() { }

  ngOnInit(): void {
  }

}

Answer 1

看起來您需要使用一項服務（在本例中我們將其用作 singleton）。

使用（此處稱為 user.service.ts，但可以隨意調用）創建服務：

ng g s user

將您的登錄邏輯移動到服務中的 function 中，並使用用戶 object 在服務上設置一個屬性以備后用。

您可以使用以下方法將此服務注入到兩個組件中：

constructor(private userService: UserService) {}

您可以在登錄組件中調用登錄 function，例如：

this.userService.login(this.formGroup.value);

並直接從您的心願單組件訪問已在服務上設置的用戶屬性。

文檔中有關於 angular 服務的很好的信息，閱讀起來會很有幫助： https://angular.io/guide/architecture-services

祝你好運！

Answer 2

我的建議是創建一個身份驗證服務。

此服務可以存儲（在 cookies 或 session 存儲中）JWT 令牌（根據我的建議），但如果您只想執行一個簡單的過程，請存儲 Id。

從那時起，服務應該有 authenticate function 和 isAuthenticated function。

isAuthenticated 你在存儲中尋找用戶數據，如果它什么都沒有，它可以使用身份驗證 function 為后端提供 go。

如果您對如何操作有疑問，請告訴我