首页 文章

登录一次离子3后无法跳过登录页面

提问于
浏览 次
0

我正在使用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功能运行并导航到连接到欢迎页面的菜单页面 .

menu.ts

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中的延迟加载 .

我想要它，以便当我登录应用程序时，当我按下设备应用程序的后退按钮关闭时，它也不需要再次登录 .

ionic-framework ionic3

1 回答

  • 0

    登录时，只会将响应保存到本地存储 . 如果您已经登录，则没有检查程序 . 因此，要保持登录应用程序，您需要有一个检查器 .

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

    localStorage.setItem('isLoggedIn',true);

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

    当您注销时，请务必将 isLoggedIn 更改为false，或者只是删除它 .

    编辑：

    取决于您在 app.component.ts 中找到的整个应用的 rootpage . （ 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>这可能无法在语法上正确，因为我看不到你的整个代码 . 这仅供您的指南使用，必要时调整代码 .

    回复于

相关问题