Lifecyle 을 이용한 구현

Angular 에서는 route 부분에서 guard를 구현해 해당 페이지에 접근가능/불가 를 제어한다. ionic에서는 해당 기능을 lifecycle을 통해 제공하고 있다.

ionViewCanEnter / ionViewCanLeave

NavController에 ionViewCanEnter 와 ionViewCanLeave 는 페이지의 접근 관련제어를 담당하고 있다.

  • ionViewCanLeave 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export class MyClass{
	constructor(
		public navCtrl: NavController
	){}

	pushPage(){
		this.navCtrl.push(DetailPage);
	}

	ionViewCanLeave(): boolean{
		if(isValid(CanILeave)){
			return true;
		}else{
			return false;
		}
	}
}
  • ionViewCanEnter 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export class MyClass{
	constructor(
		public navCtrl: NavController
	){}

	pushPage(){
		this.navCtrl.push(DetailPage);
	}
}

export class DetailPage(){
	constructor(
		public navCtrl: NavController
	){}

	ionViewCanEnter(): boolean{
		if(isValid(CanIEnter)){
			return true;
		}else{
			return false;
		}
	}
}

ionViewCanEnter, ionViewCanLeave 둘 다 boolean/Promise 의 리턴 형태를 가지고 있으므로 형태에 맞게 사용하면 되겟다