时间戳

首页 > 解决方案 > Angular 接口中的 atob

angular - Angular 接口中的 atob

问题描述

我正在尝试解决令牌存储问题，在我看来，这可能是通过接口完成的。我当前的登录代码如下：

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

interface User {
  success: {
    id: number;
    role: string;
    accessToken: string;
    refreshToken: string;
    lifetime: {
      epoch: number;
      timeZone: number;
    }
  }
}

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})

export class LoginComponent {
  constructor( private fb: FormBuilder, private http: HttpClient ) { }

  loginInfo = this.fb.group({
    email: [''],
    password: ['']
  })

  onSubmit() {
    this.http.post<User>('', this.loginInfo.value)
      .subscribe(x => localStorage.setItem("currentUser",JSON.stringify(x)))
  };
}

唯一的问题是refreshToken 和accessToken 进入Base64，据我所知，只能通过atob() 函数解决。是否可以在界面中初步解决？

我了解以下代码不起作用，但这只是为了使目标更清晰：

interface User {
  success: {
    id: number;
    role: string;
    accessToken: atob(string);
    refreshToken: atob(string);
    lifetime: {
      epoch: number;
      timeZone: number;
    }
  }
}

标签： angulartypescript

解决方案

您可以尝试将接口更改为 class 并使用 getter 来解决 base64 令牌，例如：

class UserSuccess {
  id: number;
  role: string;

  get accessToken(): string {
    return atob(this._accessToken);
  }
  set accessToken(value: string) {
    this._accessToken = value;
  }
  private _accessToken?: string;

  get refreshToken(): string {
    return atob(this._refreshToken);
  }
  set refreshToken(value: string) {
    this._refreshToken = value;
  }
  private _refreshToken?: string;

  lifetime: {
    epoch: number;
    timeZone: number;
  }
}

class User {
  success: UserSuccess;
}

直接在界面上是不可能的。希望这可以帮助。

推荐阅读