Angular2在浏览器刷新后保留敏感信息答案

【问题标题】：Angular2 retain sensitive information after browser refreshAngular2在浏览器刷新后保留敏感信息
【发布时间】：2017-08-31 06:38:20
【问题描述】：

我的登录操作会返回有关登录用户的信息，无论他们是否是管理员，比如(isAdmin: true) 我可以在组件之间保留这些信息，直到浏览器刷新或类似操作。但是我在浏览器刷新后丢失了这些信息。我很困惑如何保留这个值。

我正在使用localStorage 和sessionStorage 来保存一些非敏感信息。但此信息是敏感信息，不应允许用户编辑/查看此值。

有没有什么方法可以使用 angular2 来实现这一点？

【问题讨论】：

您可以将此数据存储在服务中，因为服务是单例的，只要应用程序加载，它就应该持续存在
@OferHerman 是的。我将把它保存在可注射的服务中。但我已经看到，只要浏览器刷新，这种情况就会持续。
我也面临同样的问题。 @PhilipJohn，您找到解决方案了吗？
@MaxBertoli 请验证下面接受的答案。您可以在从 API 获取数据后将数据保留在组件中，并将其传递给组件的构造函数。刷新浏览器后，该组件应再次使用 API 调用刷新敏感数据。
谢谢@PhilipJohn，我已经有了第 1 点和第 2 点，我在服务器端创建了一个 isAdmin 函数，但没有将令牌传递给它。我会尝试，我希望它会刷新我的组件的用户界面。

标签： angular local-storage session-storage

【解决方案1】：

我在 localStorage 中保存了一个用户配置文件，并订阅了路由器事件。然后我记录了这些事件并选择了我遇到问题的路线的开始事件。当事件发生时，我从满足我的 AuthGuard 检查的 localStorage 重置用户配置文件。现在，每当我刷新时，我的数据仍然存在，而且我不会被踢出受保护的路线。

【讨论】：

【解决方案2】：

sessionStorage 和 localStorage 应由 design 重新加载最后一页

虽然存储在 localStorage 中的数据没有设置过期时间，但存储的数据页面会话结束时， sessionStorage 中的 in sessionStorage 会被清除。页面只要浏览器打开并继续存在，会话就会持续页面重新加载和恢复。

您应该从 API 获取数据并将其存储在服务中，因为服务是单例的，这意味着它将在应用程序的持续时间内可用并且不会被持久化。

import { Injectable } from '@angular/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class StorageService {
    private _isAdmin = null;

    constructor(private http: Http) {}

    public get isAdmin() {
            // If we need to fetch the data
            if (_isAdmin === null) {
              return this.http.get('https://myapi.myserver.com')
                   .map((response) => response.json().isAdmin)
                   .do(isAdmin: boolean) { this._isAdmin = isAdmin);
            })
            return Observable.of(this._isAdmin);
    }
}

如果您需要存储更多数据，也可以使用angular-redux 或其他存储库

【讨论】：

但是即使在浏览器刷新后它仍然存在？我不能将此信息保存在 localStorage 或 sessionStorage 中，因为这很敏感。我将在 Injectable 服务中使用此信息，并像@Nick 所说的那样为每次浏览器刷新调用 API。我想这是解决我问题的最佳方法。总之谢谢！
刷新后它不会保留，您需要再次获取它。请参阅 getter 中的备注。

【解决方案3】：

每次应用启动时，我都会对服务器或用户信息所在的服务器进行 API 调用。因此，当我刷新应用程序时，我会从第一手获取信息，而不必将其存储在会话中，我只需将数据存储在一个对象中并使用它。

当您登录时生成一个令牌并将其保存在会话中并与我之前提到的 API 调用一起发送。

这将是我的方法：

登录 -> 生成令牌
存储令牌
API 调用获取用户信息传递令牌（在 App init 上）

希望它对您有所帮助或至少能给您一些有价值的想法...让我们知道您是如何解决问题的！ :D

【讨论】：

是的。这是最好的解决方案。但我会将信息保存在可注入服务中，直到信息丢失或浏览器刷新。每次加载组件时调用 API 非常昂贵！
@PhilipJohn 不，我的好朋友！您只调用一次 API。将该数据存储在一个对象中，然后与共享服务共享该数据。您拨打 1 个电话，但在所有 App 中使用信息。选中此shared services 以在组件之间进行通信：angular.io/docs/ts/latest/cookbook/…
@PhilipJohn 在浏览器刷新时通过共享服务共享的所有数据都将被清除。我怎样才能防止这种情况发生？
@PhilipJohn 你不能。或者您将数据保存在某处（sessionStorage、localStorage、cookies），或者您触发 onInit() 方法，因此当组件初始化时，将触发侦听器并且所有数据都在那里。

【解决方案4】：

您不能信任客户。如果该用户是管理员，您可以创建一个返回布尔值的 API 服务，如果未设置 isAdmin 值，请检查它。

【讨论】：

如果您使用警卫，您会在每次路由更改时调用此 API 吗？你需要把它存放在某个地方