Question

我创建了一个AuthService，其中包括一个设置当前用户值的登录方法：

public static currentUser: User;

    constructor() { }

    login(name: string, psw: string): Promise<boolean> {
        return new Promise((resolve, reject) => {
            if (name == "admin" && psw == "admin") {
                AuthService.currentUser =
                    {
                        name: name,
                        role: 0,
                        id: null
                    }
                resolve(true);
            }
            else if (name == "user" && psw == "user") {
                AuthService.currentUser =
                    {
                        name: name,
                        role: 1,
                        id: '123'
                    }
                resolve(true);
            }
            else {
                reject(false);
            }
        });
    }

在登录页面ts中：

     this.auth.login(this.user.name, this.user.psw).then(async success => {
          if (success) {
            this.navctr.navigateForward("/menu")
          }
    })

最后在菜单页面：

console.log(AuthService.currentUser)

当前用户的值在那里，但是每当我刷新页面时，当前用户的值就变得不确定

编辑：我通过在用户登录成功期间使用ionic的内置本地存储功能存储值来解决了这个问题，

localStorage.setItem("userName", AuthService.currentUser.name)
localStorage.getItem("userName")

Answer 1

尝试对登录值使用额外的组件，参见示例：

export var global = {
    loginState : false
};

组件：

import {global} from "./global";

loginSubmit()
{
    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.submitLogin(email, password)
        .subscribe((response) => {
            if(response.result == 1) 
            {
                global.loginState = true;
                this.menu.close();
            }
        }, (error) => {
            console.log(error);
        });

}

如果由于完全重新加载组件而丢失数据，则最好使用@input（）值从保留在内存中的根组件获取对数据的引用。这是一个示例：

@Component({
 selector: 'hero-detail',
 templateUrl: './hero-detail.component.html'
})
export class DataDetailComponent {
 @Input() data: Data;
}

根组件可以执行加载并保存到例如localStorage或sqlite数据库。

Answer 2

单页应用程序概念

重新加载页面后，所有内容都会丢失。

当您在应用程序的“页面”中浏览时，该应用程序可以记住一些事情，因为您真正要做的是将不同的html加载到同一页面中。

如果您离开应用程序或重新加载浏览器页面，则JavaScript会被擦除并重新启动。

数据存储

解决方案是使用持久存储机制。

最常见的一种是将数据存储在cookie中。

您还可以使用各种可用的数据库技术。有许多不同的选择，最好的选择取决于移动平台和使用的浏览器。为了解决这个问题，Ionic已经发明了Ionic Storage。这为所有不同技术提供了一个通用接口。您只需要告诉它保存数据，它就会选择可用的最佳存储机制。您可以在此处阅读有关离子存储的更多信息：

Data Storage - Ionic Documentation

（实际上，我刚刚发布了此信息，然后注意到您在发现localStorage的地方进行了更新。这是Ionic Storage所采用的技术之一。您应该在本地存储上使用Ionic Storage，以实现更好的跨设备/平台兼容性）

安全性

要牢记的另一个重要考虑因素是安全性。建议不要使用自己的身份验证机制。黑客非常聪明，可以对您使用很多东西，以至于您尝试编写自己的登录库可能会给自己造成安全问题。

例如，简单起见，请确保不要将实际密码保存到cookie或存储机制中，因为它不安全。

在更复杂的一端，存在诸如定时攻击之类的事情，这意味着即使仅响应密码错误也可以使您的网站容易被黑客攻击。与计算密码的哈希值相比，检查用户名是否错误要比对密码的哈希值更快地答复，以便人们可以使用它来找出问题。

您也不应该说用户名或密码有误，请保持含糊，因为黑客可以使用它来确定哪些电子邮件/用户名是有效帐户。

如果这只是一个实验，可以使您对Ionic的运动部件有一定的经验，那很好，但是如果您打算将其推广给用户，则应认真考虑采用第三方解决方案。

离子-页面刷新期间服务数据丢失

2 个答案:

单页应用程序概念

数据存储

安全性