Question

我有一个简单的Ionic3应用程序，带有几个延迟加载的页面（使用IonicPage）和登录页面。除非用户首次登录，否则我想阻止对任何页面的所有访问。知道这是建立网站版本而不是cordova版本，防止用户只是输入懒惰网址的最佳方法是什么加载页面并访问它们而无需登录？我猜测必须有一些方法可以“点击”导航并从那里重定向到登录页面，但在文档中的任何地方都找不到。显然，我不想在每个延迟加载的页面中添加相同的代码来执行此操作。

我的想法是关于它如何工作，保持事物的逻辑应该是：

// app.component.ts
import { UserAuthService } from '..';

export class MyApp {
  constructor(userAuth: UserAuthService) {
    userAuth.init(<whatever dependency needed>);
    userAuth.unauthorized().subscribe((auth: boolean) => {
      if (auth) {
        this.nav.setRoot(HomePage);
      }
      else {
        this.nav.setRoot(LoginPage);
        this.nav.popToRoot();
      }
    });
  }
}

// user-auth.service.ts

export class UserAuthService {
  private auth: ReplaySubject;

  init(): {
    // code here to catch whatever page change there is, check if user is authorized and push new value
  }

  unauthorized(): Observable<boolean> {
    return this.auth.asObservable();
  }
}

如果我可以在成功登录后返回原始页面，那么可以获得奖励

Answer 1

经过几个小时的工作，我终于找到了解决方案：

第1步：在app.html中为ion-nav定义名称：

<ion-nav id="nav" #navCtrl [root]="rootPage"></ion-nav>

第2步：在nav中Viewchild之前获取app.component.ts：

@ViewChild("navCtrl") nav: NavController;

第3步：抓住ionViewDidEnter中每个网页的app.component.ts：

ngAfterViewInit() {  
    this.nav.viewDidEnter.subscribe(event=>{ 
      //If user is not logged in
      if(!this.checkUserLoggedIn()){
        if(event.name != "YourLoginPage")this.nav.setRoot("YourLoginPage");
      }
    })
}
checkUserLoggedIn(){
    //Your code to check whether user is logged in or not
}

离线需要登录网站

1 个答案: