将用户重定向到不同页面的好方法

Question

我在我的 ionic 3 应用程序中使用 firebase，我想根据用户的状态将用户重定向到不同的页面。

我当前的代码如下所示：

ngOnInit():void {
let that = this;

firebase.auth().onAuthStateChanged((userAuth) => {
    //Check if user is logged in on Firebase
    if (userAuth && firebase.auth().currentUser) {
        this.storage.set("userAuth", JSON.stringify(userAuth));
        firebase.database().ref('/accounts/' + firebase.auth().currentUser.uid).on('value', function(snapshot) {
            if (snapshot.exists()) {
                that.rootPage = TabsPage;
                that.userData = snapshot.val();
                that.storage.set("userData", JSON.stringify(that.userData)).then((userData:any) => {
                    that.events.publish('user:created', userData);
                });
                // set menuOptions
                that.menuOptions.header.username = that.userData.firstName + " " + that.userData.lastName;
                that.menuOptions.header.picture = that.userData.img;
                that.menuOptions.header.email = that.userData.email;

                let userCalories = that.calculateCalorieIntake(that.userData);
                that.storage.set("userCalories", JSON.stringify(userCalories));

                // set rootPage
                let premiumExpireDate = new Date(that.userData.premiumExpireDate);
                let now = new Date();
                if (premiumExpireDate > now) {
                    that.rootPage = PremiumPage;
                }
            } else {
                that.rootPage = OnboardingPage;
            }
        });
    } else {
        //User is not logged in, redirect to LoginPage
        that.rootPage = WelcomePage;
    }
});

到目前为止代码工作正常，但我在这里遇到了一些问题：

问题 1： 有时未登录的用户会被重定向到 "OnboardingPage"，谁能解释为什么？

问题 2： 到目前为止，对我来说代码看起来很脏。您有什么改进建议吗？

Answer 1

让我们以更简洁的方式处理这种情况，所以先解决问题 2

问题 2 的解决方案：

您可以执行多种重构技术。将 login、检查是否 loggedIn、userInfo 等分离到服务文件中。让我们创建一个名为 auth.provider.ts

的服务文件

auth.provider.ts

@Injectable()
export class AuthProvider {
  constructor(...) {} // inject all dependencies i.e. firebase auth modules

  login(credeitials: UserLoginForm): Observable<any> {
    // login logic
  }

  isLoggedIn(): boolean {
    // is loggedin logic
    return firebase.auth().currentUser !== null;
  }

  logout(): Observable {
    // logout logic
  }

}

只需在 app.module.ts 中注册此服务即可。现在我们已经创建了我们的魔杖。只需在您想要解决身份验证的任何页面 constructor 中注入依赖项即可。

现在让我们解决问题 1;

有时用户会重定向到 OnboardingPage，这意味着用户会话尚未过期，因此无需担心。如果您想根据身份验证处理用户重定向到页面。我针对特定场景有以下方法：

如果未登录，则将用户重定向到登录页面 在您的 app.omponent.ts 文件中，将 AuthProvider 作为构造函数的依赖项注入，并调用我们在提供程序或服务中创建的方法 isLoggedIn()。如果它 return false 将用户重定向到 LoginPage else on OnboardingPage.

切换页面时进行身份验证 Ionic 为我们提供了页面生命周期钩子，我们可以在其中编写我们的逻辑。我将解决与此场景相关的特定挂钩，即调用 ionViewCanEnter() 覆盖此挂钩调用与 isLoggedIn() 相同的方法或此挂钩中您自己的方法；根据用户的身份验证状态提示或重定向。（必须在目标页面的构造函数中注入 AuthProvider 作为依赖项）

进一步阅读生命周期挂钩：http://ionicframework.com/docs/api/navigation/NavController/#lifecycle-events

将用户重定向到不同页面的好方法

Good way to redirect user to different pages

firebase

typescript

ionic-framework

firebase-authentication

ionic3