如何將 component.ts 中的變量發送到 service.ts 進行身份驗證 Angular

Question

我正在嘗試從后端獲取 auth_token 並在服務類中使用它。 LoginComponent 成功發送用戶憑據並接收 auth_token（通過 console.log 驗證）。 但是我不知道如何使用組件中的 auth_token 變量到服務類中以將其放入 HttpHeaders 中。

我有一個基本的登錄 html。 我的 login.component.ts 看起來像這樣：

 import { LoginService } from './../../service/login.service'; import { Router } from '@angular/router'; import { Login } from './../../model/login'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { login: Login; constructor(private service: LoginService, private router: Router) { } ngOnInit(): void { this.login = new Login(); } sendLoginCredentials(){ this.service.authorizeUser(this.login) .subscribe((data)=>{ this.login.auth_token = data.auth_token; console.log(this.login.auth_token); this.router.navigate(['/home']); }) } }

頁面重定向到主頁，我得到一個 auth_token。 我已經通過 Postman 和 console.log() 驗證了這一點。 現在我需要在不同服務類的 Angular HttpHeaders 中使用這個 auth_token。 這是我的 Department.service.ts 請求部門列表：

 import { Login } from './../model/login'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { Department } from '../model/department'; import 'rxjs/add/operator/map'; const URL = 'http://127.0.0.1:8000/api/'; @Injectable({ providedIn: 'root', }) export class DepartmentService { login: Login = new Login(); httpHeaders = new HttpHeaders({ 'content-type': 'application/json', // Authorization: 'token 856f5464e0508620d4cb90d546817e201419a70e', Authorization: 'token ' + this.login.auth_token, }); constructor(private http: HttpClient) {} getAllDepartments(): Observable<Department[]> { return this.http .get(URL + 'department-list/', { headers: this.httpHeaders }) .map((resp) => resp as Department[]); } }

如果我使用硬編碼值（在注釋中），該應用程序可以工作，但它在請求標頭中給了我“未定義的令牌”。 我在 Angular 方面不太有經驗，所以我被困在這里。 謝謝！！

Answer 1

您需要使用會話而不是類來存儲“auth_token”

sessionStorage.setItem("AuthToken", JSON.stringify(data.auth_token));

每當您使用 just get from session 並使用它時：

let authValue = sessionStorage.getItem("AuthToken");

httpHeaders = new HttpHeaders({
    'content-type': 'application/json',
    Authorization: 'token ' + authValue,
});

Answer 2

you need to interceptor 
by interceptor you can set token in httpHeader

例如：

從“@angular/core”導入 {Injectable}； 從“@angular/common/http”導入 {HttpRequest, HttpHandler, HttpEvent, HttpInterceptor}; 從 'rxjs' 導入 {Observable}； 從“@core/authentication”導入{AuthService}；

@Injectable() 導出類 JwtInterceptor 實現 HttpInterceptor {

 constructor(private authService: AuthService) { } intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const token = this.authService.getToken() ; if (token !== '') { const authReq = request.clone({ setHeaders: { Authorization: `Bearer ${token}` } }); return next.handle(authReq); } else { return next.handle(request); } } }