Question

我在我的离子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（）。如果它返回 false 将用户重定向到登录页面 OnboardingPage 。

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

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

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

1 个答案: