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

Question

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

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

有什么方法可以使用 angular2 来实现吗？

Answer 1

你不能相信客户。如果该用户是管理员，您可以创建一个 API 服务 returns 布尔值，如果未设置 isAdmin 值，则检查它。

Answer 2

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

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

那将是我的方法：

登录 -> 生成令牌
存储令牌
API 调用获取用户信息传递令牌（在应用程序初始化时）

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

Answer 3

sessionStorage 和 localStorage 应该在 design

之前重新加载最后一页

while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores.

您应该从 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或其他存储库

Answer 4

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

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

Angular2 retain sensitive information after browser refresh

session-storage

local-storage

angular