Login 需要在网站的延迟加载页面上登录

我有一个简单的Ionic3应用程序，有两个延迟加载的页面（使用

IonicPage

）和一个登录页面。我想阻止对任何页面的所有访问，除非用户首次登录。知道这是建立一个网站版本，而不是cordova版本，什么是防止用户只需键入延迟加载页面的url并在不登录的情况下访问它们的最佳方法？我猜一定有某种方法可以“点击”导航并从那里重定向到登录页面，但在文档中找不到。显然，我不想在每个延迟加载的页面中添加相同的代码来实现这一点

以下是我关于如何工作的想法，保持事情的逻辑在它应该在的地方：

// 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();
  }
}

//app.component.ts
从“..”导入{UserAuthService}；
导出类MyApp{
构造函数（userAuth:UserAuthService）{
userAuth.init（）；
userAuth.unauthorized（）.subscribe（（auth:boolean）=>{
if（auth）{
this.nav.setRoot（主页）；
}
否则{
this.nav.setRoot（LoginPage）；
this.nav.poptroot（）；
}
});
}
}
//user-auth.service.ts
导出类UserAuthService{
私有auth:ReplaySubject；
init（）：{
//这里的代码可以捕获任何页面更改，检查用户是否被授权并推送新值
}
未授权（）：可观察{
返回此.auth.asObservable（）；
}
}

---

另外，如果我在工作数小时后成功登录后可以返回到原始页面，我最终找到了一个解决方案：

步骤1:在app.html中为您的

ion导航定义一个名称：

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

第3步：捕获
应用程序组件.ts中每页的IonViewDiEnter
：

@ViewChild("navCtrl") nav: NavController;

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
}

显然，我不想在每个延迟加载的页面中添加相同的代码来实现这一点：所以使用
NavGuards
不是一个选项？@sebafereras哼哼，可能是什么？我已经取消了我的答案，如果这不是你想要的，请告诉我，我会再次删除它…@sebafereras哦，是的，这不是我想要的，为此，您必须复制粘贴每个页面中的代码，或者您需要创建一个其他人都可以扩展的母版页。。。这就是我现在所做的，但这不是我需要的
by-feature
方式，“用户功能”应该控制这一点，因为您已经创建了一个其他人都扩展的母版页，为什么不创建另一个母版页，
UserBasePage
，其中有
ionViewCanEnter
钩子，然后在仅限用户的页面中扩展该页面？这就是我实际上做的…嗯，很好的方法。但是我有两个问题：1）为什么要使用
viewDidEnter
而不是
viewWillEnter
，这样用户就不能真正看到页面了？2） 这仍然有效吗
event.name！=“YourLoginPage”
如果您使用
--prod
标志，则代码会被Webpack？1缩小和丑化
viewDidEnter
和
viewWillEnter
在这种情况下是相同的，因为我们无法停止这些生命周期。如果您使用
viewWillEnter
，则在更改页面之前，它仍会触发
viewdienter
。我没有在
--prod
模式下尝试，我不确定延迟加载页面是否会在缩小和丑陋后更改名称。如果它不起作用，我相信会有一次散步around@sebaferreras：使用
--prod
进行测试。很好用：-）非常感谢您的评论Duanx:）