时间戳

首页 > 解决方案 > 在 Ionic 中，为什么路由在 iPhone 上不起作用，但在构建版本和离子服务上起作用

ios - 在 Ionic 中，为什么路由在 iPhone 上不起作用，但在构建版本和离子服务上起作用

问题描述

我有一个应用程序（顺便说一下 - 与node.js服务器通信），在离子和路由和登录页面适用于ionic serve版本，但无法作为 iPhone 应用程序运行。问题是我可以在 iPhone 上运行应用程序并查看登录页面，但是当我设置正确的凭据并按 OK 时，我没有被路由到下一页（这是用户登录时的默认页面），所以我不知道错误在哪里。我试图用index.html拥有base href="/"和构建应用程序base href="."，但没有奏效。我还能尝试什么？这是 app.module.ts 中定义路由模块的代码：

import { AppRoutingModule } from './app-routing.module';

然后它还有导入部分：

imports: [
    BrowserModule,
    AppRoutingModule, 
    SharedModule,
  ],

接下来，这是ap-routing.module中的相关代码：

import { Routes, RouterModule } from "@angular/router";
import { AuthGuard } from "./services/auth.guard";

const routes: Routes = [
    {
        path: "streams",
        loadChildren: "./components/streams/streams.module#StreamsModule",
        canActivate: [AuthGuard]
    },

StreamsModule 相关代码：

import { StreamsRoutingModule } from './streams-routing.module';
import { SharedModule } from './../../shared/shared.module';

@NgModule({
  declarations: [StreamsComponent],
  imports: [
    CommonModule,
    SharedModule,
    StreamsRoutingModule
  ]
})

这是登录时触发的代码：

loginUser() {
        this.showSpinner = true;
        this.authService.loginUser(this.loginForm.value).subscribe(
            data => {
                this.tokenService.SetToken(data.token);
                this.loginForm.reset();
                setTimeout(() => {
                    this.router.navigate(["streams"]);
                }, 3000);
            },
            err => {
                this.showSpinner = false;

                if (err.error.message) {
                    this.errorMessage = err.error.message;
                }
            }
        );
    }

最后，流路由模块中的 routes 变量：

const routes: Routes = [
    {
        path: "",
        component: StreamsComponent
    },
    {
        path: "streams",
        component: StreamsComponent
    },
    {
        path: "**",
        redirectTo: "streams",
        pathMatch: "full"
    }
];

这是 authguard：

import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Observable } from "rxjs";
import { TokenService } from "./token.service";

@Injectable({
    providedIn: "root"
})
export class AuthGuard implements CanActivate {
    constructor(private router: Router, private tokenService: TokenService) {}

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> | Promise<boolean> | boolean {
        const token = this.tokenService.GetToken();
        if (token) {
            return true;
        } else {
            this.router.navigate(["/"]);
            return false;
        }
    }
}

现在，在 ios 应用程序的登录过程中，在使用 safari 开发人员模式进行检查时，我可以在我的 iPhone 上看到来自应用程序的 http 流量，并且我可以看到正在拨打电话并检索到正确的响应，即我是登录，但是，屏幕在登录页面上冻结。为什么路由在 ios 应用程序上不能正常工作并且在ionic server版本上工作正常？

标签： iosiphoneionic-frameworkroutes

解决方案

AuthGuard事实证明，问题出在服务中。Guard 返回一个布尔结果。如果用户已登录，则返回 true 并继续导航。

Auth Guard 是原因，我通过返回 true 来简化它，并且它传递路由现在可以正常工作。

我很高兴能够帮助您提出解决方案。

PS 此外，如果您想阻止应用程序在用户未获授权的情况下加载整个模块，您可以使用canLoad(). 例如：

canLoad() {
    return this._storage.get('userLogged').then(res => {
      if (res) {
        this.router.navigate(['/example-route']);
        return false;
      } else {
        return true;
      }
    });
}

推荐阅读