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

Posted 2023-02-23

【中文标题】在 Ionic 中，为啥路由在 iPhone 上不起作用，但在构建版本和离子服务上起作用

【英文标题】：In Ionic, why doesn't the routing work on iPhone, but works on built version and on ionic serve在 Ionic 中，为什么路由在 iPhone 上不起作用，但在构建版本和离子服务上起作用

【发布时间】：2020-05-21 17:04:33

【问题描述】：

我有一个应用程序（顺便说一下 - 与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;
                
            
        );
    

最后，streams 路由模块中的 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 版本上工作正常？

【问题讨论】：

桌面版 Safari 可以用吗？

它确实有效。我刚刚检查过了。

你的AuthGuard服务里面有什么？

我在问题中添加了 AuthGuard。

Auth Guard 是原因，我通过返回 true 来简化它，并且它通过路由现在可以正常工作。我还有其他问题，但是这个问题已经解决了，谢谢。您可以发布答案，您将获得赏金，@TomislavStankovic

【参考方案1】：

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

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

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

---

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

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