一次ionic 3

Question

我正在使用MySQL数据库制作一个登录应用程序。我已经完成登录，但是当我关闭应用程序或按手机的后退按钮时，它将再次从登录页面开始。

我试图将登录数据保存在本地存储中，但是它不起作用。我一直在网上搜索一些答案，但似乎找不到解决方法。

下面是我的代码

login.ts

signIn(page) {
if(this.username.value==""){
  let alert = this.alertCtrl.create({

    title:"ATTENTION",

    subTitle:"Username field is empty",

    buttons: ['OK']

    });

    alert.present();
}else if(this.password.value=="") {
  let alert = this.alertCtrl.create({

    title:"ATTENTION",

    subTitle:"Password field is empty",

    buttons: ['OK']

    });

    alert.present();
}
else {
  var headers = new Headers();
  headers.append("Accept", 'application/json');

  headers.append('Content-Type', 'application/json' );

  let options = new RequestOptions({ headers: headers });

  let data = {

    username: this.username.value,
    password: this.password.value

    };
  let loader = this.loading.create({
    content: 'Processing please wait…',    
    });
  loader.present().then(()=>{
    this.http.post('http://mybusket.com/webapi/carapi/logincheck.php',data,options)
    .map(res=>res.json())
    .subscribe(res=>{
      console.log(res)
      loader.dismiss()
      if(res>0) {
        localStorage.setItem('response',JSON.stringify(res));
          console.log(JSON.parse(localStorage.getItem('response')));


          this.navCtrl.push(page)
      }
      else{
        let alert = this.alertCtrl.create({

          title:"ERROR",

          subTitle:"Your Login Username or Password is invalid",

          buttons: ['OK']

          });

          alert.present();
      }
    });
  });    
}
}

当我单击按钮时，SignIn功能将运行并导航到连接到欢迎页面的菜单页面。

菜单

export class MenuPage {

rootPage = 'Welcome';
pages = [
{ title: 'Home', component: 'Welcome' },
{ title: 'Qr Code', component: 'QrPage' },
  { title: 'Logout', component: 'LogoutPage' }
];

@ViewChild('content') nav: NavController;

constructor(public navCtrl: NavController, public navParams: NavParams) 
{
}

ionViewDidLoad() {
console.log('ionViewDidLoad MenuPage');
}

 openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}

}

我正在处理离子3中的延迟加载。

我想要它，这样当我登录应用程序时，即使我按设备应用程序的后退按钮关闭，也不需要再次登录。

Answer 1

登录时，仅将响应保存到本地存储中。如果没有登录，则没有检查器。因此，要保持登录该应用程序，您需要一个检查器。

如果成功登录，请在本地存储中创建一个项目。例如，将项目isLoggedIn设置为true。

localStorage.setItem('isLoggedIn',true);

退出并重新启动应用程序时，首先要做的是从本地存储中检查isLoggedIn。如果为true，则导航到“欢迎”页面。否则，请转到“登录”页面。

注销时，请确保将isLoggedIn更改为false，或直接将其删除。

编辑：

取决于整个应用程序的rootpage，您可以在app.component.ts中找到它。 （rootpage是打开应用程序时显示的第一页）

如果您整个应用的rootpage是您的登录页面， 您的.ts文件应该具有

constructor{

    //check if the isLoggedIn in the local storage exists or is true
    if(localstorage.getItem('isLoggedIn')){

    // if it is true, set the menupage (which is connected to your welcome page) as root. 
        this.navCtrl.setRoot(MenuPage); 
    }

}

此外，在“登录”页面中。在您的signin(page)方法中，对此进行调整

if(res>0) {
    localStorage.setItem('response',JSON.stringify(res));
      console.log(JSON.parse(localStorage.getItem('response')));

    // add this
    // set the isLoggedIn to true
    localStorage.setItem('isLoggedin', true);

    this.navCtrl.push(page)
}

PS>在语法上这可能无法正常工作，因为我看不到您的完整代码。仅供参考，如有必要，请调整代码。