前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ionic 登录 注销 (ts格式) 原

ionic 登录 注销 (ts格式) 原

作者头像
tianyawhl
发布2019-04-04 15:37:38
1.3K0
发布2019-04-04 15:37:38
举报

在输入账号与密码点击登录时如果成功,登录页面隐藏,显示出登录成功后的用户中心,然后点击用户中心的注销,弹出登录页面

首先引入ViewController

import {NavController,LoadingController,ToastController,ModalController,ViewController} from 'ionic-angular';
constructor(private navCtrl: NavController, private loadingCtrl: LoadingController,private toastCtrl: ToastController,public modalCtrl: ModalController,public viewCtrl: ViewController) {
  	this.navCtrl=navCtrl;
}
 login(){
     /* var localStorage = {
              username:'',
              Logined:'',
            }*/
    if(this.user.username==''){
      let toast=this.toastCtrl.create({
      message:"请填写用户名",
      duration:3000,
      position:"middle"
      });
      toast.onDidDismiss(() =>{
        console.log("has dismissed");
        });
      toast.present();
      }else if(this.user.username!=='' && this.user.userpassword=="1"){
        //设置localStorage 的 username 与Logined,在ts中只能这样设置
        localStorage.setItem("username", this.user.username);
        localStorage.setItem("Logined", "true");

        let loading = this.loadingCtrl.create({
        content: 'Please wait...'
      });
     如果显示loading,下面的this.viewCtrl.dismiss(this.user.username);无效 不知是什么原因
      // loading.present();
       
       //this.viewCtrl.dismiss();
       setTimeout(() => {
         
          //alert(this.viewCtrl);
         // 页面消失时传入用户的用户名,用于用户中心的头像切换
          this.viewCtrl.dismiss(this.user.username);
          
          loading.dismiss();
          
           }, 1000);
       

      } else if(this.user.username!=='' && this.user.userpassword!=="1"){

        let toast=this.toastCtrl.create({
          message:"登录失败,密码错误",
          duration:3000,
          position:"middle"
          });
          toast.present();
      }

  }

用户中心页面

import {Component} from '@angular/core';
import {NavController,LoadingController,AlertController,ToastController,ModalController,ViewController } from 'ionic-angular';
import {ImagePicker} from 'ionic-native';
import {ContactPage} from '../contact/contact';


@Component({
  templateUrl: 'build/pages/contact/usercenter.html'
})
export class UserCenter {
	public user={
       username : '',
       userpassword :'' ,
       headface:'images/1.png'  
  }
  constructor(private navCtrl: NavController, private loadingCtrl: LoadingController, private alertCtrl: AlertController, private toastCtrl: ToastController,public modalCtrl: ModalController,public viewCtrl: ViewController) {
  	//this.navCtrl=navCtrl;
   // this.viewCtrl=viewCtrl;

    if(localStorage.getItem("Logined") == "true"){
      //已经登录的状态,不跳转,显示用户信息即可
      this.user.headface = 'images/'+localStorage.getItem("username")+'.png' 
    } else {
       let modal = this.modalCtrl.create(ContactPage);
       modal.onDidDismiss(data => {
       this.user.headface= 'images/'+ data +'.png' 
   });
        modal.present();
    }
  }
  logout(){
    localStorage.setItem("username","");
    localStorage.setItem("Logined", "");
    let modal = this.modalCtrl.create(ContactPage);
     modal.onDidDismiss(data =>{
        this.user.headface= 'images/'+ data +'.png' 
        });
    modal.present();
  }

 
   

}

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016/12/13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档