这篇文章原来是转载的,因为里面有些代码在实际应用上有些出入。笔者在这里进行了改良更新,所以标记为了原创。
创建一个登录页面
$ ionic g page login
在 app.modules.ts中引入LoginPage,并在声明组件declarations、entryComponents中添加 LoginPage
import { LoginPage } from '../pages/login/login';
在app.components.ts页面 引入LoginPage, 设置loginPage为首次显示页面
import { LoginPage } from '../pages/login/login';
export class MyApp {
rootPage = LoginPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
login.html
登录
账号
密码
login.ts
利用 LocalStorage 存储登录状态,假设用户名为 test,密码为 123456,当两者匹配时,将用户名存储到 Storage 中,并跳转到 Tabs 页面。如果有对接服务器数据请求,那么这块可以换为向服务器提交登录,并且将服务器返回的值存入Storage,服务器这块在这里就不讲解了。
logIn(username: HTMLInputElement, password : HTMLInputElement) {
if(username.value.length > 0) {
console.log(username.value);
}
if(password.value.length > 0 ) {
console.log(password.value);
}
if(username.value == 'test' && password.value == '123123') {
window.localStorage.setItem('username',username.value); //保存登录时数据
this.navCtrl.setRoot(TabsPage); //跳转到登录后的页面
}
}
为什么用 setRoot 而不是 push?
在之前NavController 的 push 方法跳转页面,为何这里使用的却是另一个方法 setRoot 呢?因为这两种方法的原理不同,push是将新页面推送到页面栈中,新页面可以 pop 回旧页面;而 setRoot 是将原有的根页面替换成新页面,相当于换了一个新的页面栈,原有的页面已经被回收掉了,这时候新页面是无法 pop 回旧页面的。
在界面表现上,如果是通过 push 进 Tabs 页面,可以通过 Android 设备上的返回按钮回到登录页面,这显然不符合我们的操作逻辑。
home.html
登录名称:{{username}}
home.ts 获取 Storage 的数据
public username:string;
constructor(public navCtrl: NavController) {
}
ionViewWillEnter(){
this.username= window.localStorage.getItem('username');
}
之后展示为:
在测试过程中,你会发现,浏览器的每次刷新都要重新登录。这时,就需要修改在此修改 app.component.ts 添加一个钩子:判断 Storage 中存在 username 与否,定义不同的 rootPage ,再刷新页面可以发现,APP 直接进入首页了。
export class MyApp {
rootPage:any;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
if(window.localStorage.getItem('username')) {
this.rootPage = TabsPage;
} else {
this.rootPage = LoginPage;
}
platform.ready().then(() => {
...
});
}
}
清除 Storage 中的用户信息
这里说一下,原文用的是navCtrl做的根导航设置,比如这样:
logout() {
window.localStorage.removeItem('username');
this.navCtrl.setRoot(LoginPage);
}
导航到根组件LoginPage后底部tab仍然存在,如果用一些技术手段将tab隐藏也可以做到,但是当隐藏后继续点击登录以后,会发现虽然页面已经到了tab的第一个页面,但是tab的焦点还在User的选项卡上面(我的项目和现在的文章有些不一样,我项目的登出不在首页,所以登录后设置的根组件并不是触发退出登录的页面,这就发生了这个问题),后面我换了另一个方法来解决这个问题:
this.app.getRootNav().setRoot(LoginPage);
但是,ionic提示我getRootNav()方法即将启用,那么我就在国外论坛上面找另一个替代方法
this.app.getRootNavs()[0].setRoot(LoginPage);
这里特别强调这一点,因为ionic团队是不断发展的,随着你ionic版本的升级,一些方法即将面临废弃,那么就要用这个新的来代替。
logout() {
window.localStorage.removeItem('username');
this.app.getRootNavs()[0].setRoot(LoginPage);
}