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

Question

我有一个应用程序（顺便说一下，它与 node.js 服务器通信），离子和路由和登录页面适用于 ionic serve 版本，但无法运行作为 iPhone 应用程序。问题是我可以运行 iPhone 上的应用程序并看到登录页面，但是当我设置正确的凭据并按 OK 时，我没有被路由到下一页（这是默认页面用户登录时出现），所以我不知道错误在哪里。我尝试使用具有 base href="/" 和 base href="." 的 index.html 来构建应用程序，但这没有用。我还能尝试什么？这是 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;
                }
            }
        );
    }

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

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 版本上可以正常工作？

Answer 1

事实证明，问题出在 AuthGuard 服务中。守卫 returns 布尔结果。如果用户已登录，则 returns 为真并且导航继续。

The Auth Guard was the cause, I simplified it by just returning true, and it passes on the routing now works.

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

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

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

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

In Ionic, why doesn't the routing work on iPhone, but works on built version and on ionic serve

iphone

routes

ios

ionic-framework