在何处安全地将凭据(用户名和密码)放置在Angular8代码中以访问受保护的SpringBoot Rest API

export const environment = {
  production: false,
  apiCredentials: {
    username: 'your_username',
    password: 'your_password'
  }
};

import { environment } from 'src/environments/environment';

const username = environment.apiCredentials.username;
const password = environment.apiCredentials.password;

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CredentialsService {
  private username: string;
  private password: string;

  setUsername(username: string) {
    this.username = username;
  }

  setPassword(password: string) {
    this.password = password;
  }

  getUsername(): string {
    return this.username;
  }

  getPassword(): string {
    return this.password;
  }
}

import { Component } from '@angular/core';
import { CredentialsService } from './credentials.service';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="login()">Login</button>
  `
})
export class ExampleComponent {
  constructor(private credentialsService: CredentialsService) {}

  login() {
    const username = 'your_username';
    const password = 'your_password';
    this.credentialsService.setUsername(username);
    this.credentialsService.setPassword(password);
    // 使用凭据进行登录操作
  }
}

import { Component } from '@angular/core';
import { CredentialsService } from './credentials.service';

@Component({
  selector: 'app-another-example',
  template: `
    <button (click)="getData()">Get Data</button>
  `
})
export class AnotherExampleComponent {
  constructor(private credentialsService: CredentialsService) {}

  getData() {
    const username = this.credentialsService.getUsername();
    const password = this.credentialsService.getPassword();
    // 使用凭据获取数据
  }
}