authentication - 如何在登录时将登录替换为帐户。[离子 5] -> 离子标签

Question

我试图在用户登录后将 LoginPage 替换为 AccountPage，将选项卡保留在底部，但是在使用 this.router.navigate(account) 之后，它会完全删除选项卡。

预期行为：用户单击帐户选项卡，用户登录，登录页面替换为用户帐户页面。以下是预期行为的一些屏幕截图

登录前

登录后

• 登录页面.ts

    login() {
        if (this.loginForm.valid) {
            this.loadingService.show();
            this.userService.login(this.loginForm.value).subscribe(
                (data: any) => {
                    this.loadingService.hide();
                    if (data.status === "success") {
                        let user = data.data;
                        this.storageService.setUser(user);
                        this.events.publish("user:logged", user);
                        this.openUserAccount(user.id, user);
                    } else {
                        this.alertService.present(data.message, data.status);
                        console.log(data.message, data.status )
                    }
                },
                () => {
                    this.loadingService.hide();
                    this.toastService.showGenericError();
                }
            );
        }
    }

    openUserAccount(id: string, user: User){
        this.dataService.setData(id, user);
        this.router.navigate(["/account", id]);


    }

• tabs.page.ts

tabs: any[] = [
        {
            name: "novelties",
            icon: "icon-novelties"
        },
        { 
            name: "pratos",
            icon: "icon-menus" },
        { 
            name: "account",
            icon: "icon-user" 
        },
        {
            name: "stores",
            icon: "icon-stores"
        },
        { 
            name: "about",
            icon: "icon-qrcode" 
        }
    ];

• 选项卡路由.module.ts

const routes: Routes = [
    {
        path: "tabs",
        component: TabsPage,
        children: [
            {
                path: "novelties",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/novelties/novelties.module").then(m => m.NoveltiesPageModule)
                    }
                ]
            },
            {
                path: "pratos",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/pratos/pratos.module").then(m => m.PratosPageModule)
                    }
                ]
            },
            {
                path: "account",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/login/login.module").then(m => m.LoginPageModule)
                    }
                ]
            },
            {
                path: "stores",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/stores/stores.module").then(m => m.StoresPageModule)
                    }
                ]
            },
            {
                path: "about",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/about/about.module").then(m => m.AboutPageModule)
                    }
                ]
            },
            {
                path: "",
                redirectTo: "/tabs/novelties",
                pathMatch: "full"
            }
        ]
    },
    {
        path: "",
        redirectTo: "/tabs/novelties",
        pathMatch: "full"
    }
];

标签： authenticationredirecttabsionic5

Answer 1

所以我设法让它工作。现在我只需要能够传递 id，这是行不通的。

我是这样做的：

• 选项卡路由.module.ts

//----- ADDED THIS PATH
{
                path: "login/account/:id",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/account/account.module").then(m => m.AccountPageModule)
                    }
                ]
            },

• 登录页面.ts

 openUserAccount(id: string, user: User){
        this.dataService.setData(id, user);
       ///// this.router.navigate(["/account", id]); <-- REMOVED THIS LINE
        this.router.navigate(['tabs/login/account', id]); <-- REPLACED WITH 
    }

现在选项卡的问题已解决，但是我无法访问该 ID。

• account.page.ts

    ngOnInit() {
    console.log(this.route.snapshot.parent.data["user"]); <-- I'm certain the problem is here..
        if (this.route.snapshot.parent.data["user"]) {
            this.user = this.route.snapshot.data["user"];
            console.log(this.user);
    }
    console.log(this.user);
    }
}

我怎样才能访问id