在 Angular2 中刷新页面时如何维护令牌？

Question

我有一个主页，有人在其中插入令牌，然后转到主页，然后通过按钮转到第二页。我使用一个服务在三个组件之间传递令牌，以及一个使用这个令牌调用 API 请求的服务。当我在主页或第二页并刷新页面时，令牌会丢失。我该怎么办？

首页的组件

export class HomepageComponent implements OnInit {

    token:any;
    a:string;
  settings: any;
  constructor (public parkingService: ParkingService, public root:Router, public dataService:DataService) { 


  }
  ngOnInit(){


  }

        pass(passa)
          {

        this.a= passa.value;
        this.parkingService.setUserToken(this.a);

       // this.dataService.token=this.a;
         var token = this.a;
        localStorage.setItem("token", token);

        this.dataService.setToken(localStorage.getItem("token"));
        this.parkingService.getparkingDetails().subscribe(
          data=>
          {
           // this.dataService.token=this.a;
        this.root.navigate(['/pages/iot-dashboard']);

      },
      error => {
        window.alert("Παρακαλώ δώστε έγκυρο token για το χώρο στάθμευσης");
        console.error(error);
        this.root.navigate(['/pages/dashboard'] );

      },
      );
          }




}

主页面组件

export class DashboardComponent implements OnInit {



  selectedMoments1 = new Date();
  selectedMoments2 = new Date();
  selectedMoment = new Date();
  time1 = new Date();
  time2 = new Date();
  time3 = new Date();
  getdata: any;
  parkingid: string;
  parkingpost: any;
  allspots: any;
  getdatadis: any;
  allspotsdis: any;
 // token:string;
  snapshot:any;
  selected="general";
  selected2="general";

  token:any;
  listadis:string[];
  plate:any;
  listindexdisabled:number[]=[];
  listindex:number[]=[];
  user:any;
  constructor(private parkingService: ParkingService, private route:ActivatedRoute, public root:Router , public dataservice:DataService) {


  }
  ngOnInit(){
    this.token=this.dataservice.token;
    //this.dataservice.setToken(this.token);
    this.parkingService.setUserToken(this.token);
    this.parkingService.getparkingDetails().subscribe(
      data=>
      {
      this.parkingid = data._id
      this.getdata = JSON.parse(data.spaces_occupied_current_slot.conventional)
      this.allspots = JSON.parse(data.space_total.conventional)
      this.getdatadis = JSON.parse(data.spaces_occupied_current_slot.disabled)
      this.allspotsdis = JSON.parse(data.space_total.disabled)
    },
    error => {
      window.alert("Παρακαλώ δώστε έγκυρο token για το χώρο στάθμευσης");
      console.error(error);
      this.root.navigate(['/pages/dashboard']);

    },
    );

  }
........

在组件之间传递令牌的服务

import { Injectable } from '@angular/core';
import { Subject, BehaviorSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

@Injectable()
export class DataService {

     public token: string;

     setToken(token:any){
          this.token=token;


       }

}

使用令牌的 API 请求服务

import {Component, OnDestroy, ErrorHandler, OnInit} from '@angular/core';
import { Injectable } from '@angular/core';
import {
    BehaviorSubject,
    Observable,
    throwError as observableThrowError,
    Subject,
  } from 'rxjs';

  import {
    HttpClient,
    HttpErrorResponse,
    HttpHeaders,
  } from '@angular/common/http';
  import 'rxjs/add/operator/map';
  import { catchError} from 'rxjs/operators';
import { NbAuthSimpleToken, NbAuthService, NbAuthSimpleInterceptor } from '@nebular/auth';
import { Router } from '@angular/router';
import {DataService} from './data.service';


@Injectable()
  export class ParkingService implements OnInit{
    public userToken$: Subject<string> = new BehaviorSubject<string>(null);
     public token: string;

    currenttoken = this.userToken$.asObservable();

    constructor( private httpclient: HttpClient, private root:Router, private dataservice:DataService){
      this.userToken$.subscribe( token => {
        this.token = token;
        console.log(this.token)

  });
      this.dataservice.token

    }
  ngOnInit(): void {


  }

    setUserToken(token: string) {

      this.userToken$.next(token);


  }

      getparkingDetails(): Observable<any>{

        console.log(this.token);
        const httpOptions = {


            headers: new HttpHeaders({

              'Content-Type':  'application/json',
              'Authorization': 'Bearer: ' + this.token,
            }),
          };


          return this.httpclient.get<any>("https://socialpark.iti.gr:8005/parking_sites/management", httpOptions).pipe(
            catchError(this.errorHandler));
        }  

Answer 1

成功登录后，您可以将令牌存储在本地存储中，如给定的here

login(userObj:User) {
    return this.http.post<any>(`${config.apiUrl}/users/login`, userObj)
        .pipe(map(user => {
            // login successful if there's a jwt token in the response
            if (user && user.token) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('user', JSON.stringify(user));
            }

            return user;
        }));
}

令牌不会在浏览器刷新或关闭时被删除，直到用户手动删除它，

  logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('user');
}

从组件的本地存储中获取存储的令牌，如下所示

import { Component, OnInit } from '@angular/core';

@Component({templateUrl: 'home.component.html'})
export class HomeComponent implements OnInit {
    currentUser: User;

    constructor() {
        this.currentUser = JSON.parse(localStorage.getItem('user'));
    }

    ngOnInit() {
    }

   }

此外，您可以使用 JWT 拦截器将此令牌附加到每个 http 请求

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = JSON.parse(localStorage.getItem('user'));
        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: { 
                    Authorization: `Bearer ${currentUser.token}`
                }
            });
        }

        return next.handle(request);
    }
}

将拦截器添加到 app.module 的 providers 数组中

   import { JwtInterceptor} from './_helpers';

    @NgModule({
    imports: [ .. ],
    declarations: [..],
    providers: [
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    ]
    })

Answer 2

将令牌存储在本地存储中怎么样？

#Set
localStorage.setItem("token", "xyz");

#get
localStorage.getItem("token", "xyz");

编辑 1--- 你可以在服务类中设置这个

export class DataService {

     public token: string;

     public DataService(){
        this.token = localStorage.getItem("token");
     }

     setToken(token:any){
        this.token=token;
        localStorage.setItem("token", token);

       }

}