专栏首页前端之攻略ionic 登录 注销 (ts格式) 原

ionic 登录 注销 (ts格式) 原

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

首先引入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({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • vue 中使用threejs

    tianyawhl
  • highcharts 自适应div的宽度

    如果窗口变化时,highcharts图表是自带自适应的,但是切换折叠菜单时,highchats图表并不自适应外层div的宽度。如何实现适应div的宽度?

    tianyawhl
  • Mybatis深入源码分析之Mapper与接口绑定原理源码分析

    紧接上篇文章:Mybatis深入源码分析之SqlSessionFactoryBuilder源码分析,这里再来分析下,Mapper与接口绑定原理。

    须臾之余
  • Javascript中关键参数this浅析

    Sb_Coco
  • 聊聊spring cloud的FeignClientFactoryBean

    本文主要研究一下spring cloud的FeignClientFactoryBean

    codecraft
  • 聊聊spring cloud的FeignClientFactoryBean

    本文主要研究一下spring cloud的FeignClientFactoryBean

    codecraft
  • 实现盒子动画和键盘特效

    望月从良
  • 关于蚂蚁庄园登山赛你可以还不知道的秘密!我也写一个康康!Cocos Creator 3D!

    监听TOUCH_MOVE事件控制小鸡左右移动,并要判断边界。注意手指移动的变化和实际屏幕看到的大小是不一样的,这是因为摄像机投影的原因。我是乘了一个系数,可能有...

    白玉无冰
  • 聊聊rocketmq的PullConsumerImpl

    io/openmessaging/rocketmq/consumer/PullConsumerImpl.java

    codecraft

扫码关注云+社区

领取腾讯云代金券