Question

我正在使用本机脚本角应用。当用户登录应用程序时，我从firebase对用户进行身份验证，然后检查用户是否已完成注册过程。如果不是，则应用程序将用户导航到注册页面，否则它将用户发送到主页面。

我发现当用户未完成用户注册日志的用户暂时被带到主页1或2秒后被重定向到注册页面。关于为什么会发生这种情况以及如何解决问题的任何建议

（我希望没有注册的用户直接进入注册页面而不会在几秒钟内进入主页面）。我正在使用nativescript-plugin-firebase进行身份验证。

我的代码如下：

app.routing.ts

import {LoginComponent} from "./login/login.component"
import { RegistrationComponent } from "./registration/registration.component"
import {MainComponent, MainTabComponent,TabComponent} from          "./shared/maintab/maintab.component"
import {AuthGuard} from "./services/auth-guard.service"

export const AppRoutes:any =[
    { path: "login", component:LoginComponent },
    { path: "registration", component:RegistrationComponent},
    { path:"main", component:MainComponent,canActivate:[AuthGuard],
        children: [
            { path: "tab/0", component: UserFeedExampleComponent },
            { path: "tab/1", component: TabComponent }, 
             { path: "", redirectTo: "tab/0", pathMatch: "full" }
        ]
    },
    { path: "", redirectTo: "login", pathMatch: "full" }   
];

export const AppComponents: any = [
    MainTabComponent,
    MainComponent,
    TabComponent,
     LoginComponent,
    RegistrationComponent
];

login.component.ts

import { Component, OnInit, Input } from "@angular/core";
import { Page } from "ui/page";
import { Router, NavigationExtras } from "@angular/router";
import { RouterExtensions } from 'nativescript-angular/router/router-extensions';
import firebase = require("nativescript-plugin-firebase");
import { FirebaseAuthService } from '../services/firebase-auth.service';
import { User } from '../models/user.model';


@Component({
    moduleId: module.id,
    selector: "app-login",
    templateUrl: "./login.component.html",
    // changeDetection: ChangeDetectionStrategy.OnPush
})

export class LoginComponent {
    user: User;
    isLoggingIn = true;
    isRegistering = false;
    isAuthenticating = false;
    firstname: string;
    lastname: string;


    constructor(private firebaseAuthService: FirebaseAuthService,
        private routerExtensions: RouterExtensions,
        private router: Router,
        private page: Page
    ) {
        page.actionBarHidden = true;
        this.user = new User("", "");
        this.firstname = "";
        this.lastname = "";
    }


    submit() {
        this.isAuthenticating = true;
        if (!this.isLoggingIn && !this.isRegistering) {
            this.login();
        } else {
            this.signUp();
        }
    }

    login() {
        this.firebaseAuthService.login(this.user)
            .then(() => {
                this.isAuthenticating = false;
                this.checkUserRegistration(this.user);
            })
            .catch((message: any) => {
                this.isAuthenticating = false;
            });
    }

    public onGoogleLoginTap() {
        var self = this;
        firebase.login({
            type: firebase.LoginType.GOOGLE
        }).then((result) => {

            self.saveUsertoDatabase();
            self.checkUserRegistration(result);

        }),
            function (errorMessage) {
                console.log(errorMessage);
            }
        console.log("login with google");
    };

    saveUsertoDatabase() {
        var self = this;
        firebase.getCurrentUser().then((user) => {
            firebase.update('/trial/' + user.uid, {
                email: user.email
            }).then(
                function (result) {
                    console.log("User uid: " + user.uid + "User email: " + user.email);
                }
                );
        }, (error) => {
            alert("Unable to get User: " + error);
        });
    }

    checkUserRegistration(result) {
        var self = this;
        var onQueryEvent = function (result) {
            if (!result.error) {
                if (!result.hasOwnProperty('registrationComplete')) {
                    self.goToRegistrationPage(self.user);
                }
                else {
                    self.gotoFeedPage();
                }
            }
        };

        firebase.query(
            onQueryEvent,
            ("/trial/" + result.uid),
            {
                singleEvent: true,
                orderBy: {
                    type: firebase.QueryOrderByType.CHILD,
                    value: 'registrationComplete'
                },
            }
        );
    }


    goToRegistrationPage(user) {
        let navigationExtras: NavigationExtras = {
            queryParams: {
                registeredUser: JSON.stringify({ user })
            }
        };
        console.log("selected user is " + JSON.stringify({ user }));
        this.router.navigate(["registration"], navigationExtras);
    }

    toggleDisplay() {
        this.isLoggingIn = !this.isLoggingIn;
    }

    toggleRegistration() {
        this.isRegistering = !this.isRegistering;
    }

    gotoFeedPage() {
        this.routerExtensions.navigate(["/main/tab/0"], { clearHistory: true });
    }


    logout() {
        this.firebaseAuthService.logout();
        console.log("Logged out")
        this.routerExtensions.navigate(["/login"], { clearHistory: true });
    }
}

有关该平台的其他详细信息如下：

2.5.0 angular-cli：1.0.0-beta.18 节点：6.9.5 os：win32 x64

Answer 1

听起来您希望您的AuthGuard（您的身份验证人员）在返回之前为您进行注册检查。 AuthGuard可以返回一个可观察或承诺，路由器在检查是异步的情况下等待。这就是为什么警卫被允许返回一个可观察或承诺 - 延迟导航直到你能够确认是否允许导航。

修改

要回答关于用户暂时查看登录页面的具体问题 - 如果您遵循逻辑，则检查用户是否已注册是对Firebase API的异步请求。由于它是异步的，在调用checkRegistration函数后，执行继续，用户被路由到您的应用程序。只有在firebase API返回结果后，才会导航到您的注册页面。

由于您不想要这种行为 - 您希望在完成所有检查之前延迟导航 - 建议您将所有检查添加到导航防护中。如果您的导航警卫返回异步结果（保证或可观察），路由器将等待异步结果完成后再导航。

Angular Nativescript路由器在登录几秒后显示错误的页面

1 个答案: