web-dev-qa-db-ja.com

履歴状態の変更を調整して、ブラウザーがハングするのを防ぎます

これは初心者angularの質問です。

私のAngularアプリケーションは複数の機能モジュールで構成されています。angular-cliからガードを生成してauthguardを使用し、アプリルーティングモジュールでCanActivateを次のように使用します。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
{path:'login',loadChildren:'./login/login.module#LoginModule',canActivate: 
[AuthGuard]},
{path:'home', loadChildren:'./user/user.module#UserModule',canActivate: 
[AuthGuard]},
{path:'cart', 
loadChildren:'./cart/cart.module#CartModule',canActivate:[AuthGuard]},
 {path:'customer',loadChildren:'./customer/customer.module#CustomerModule',canActivate:[AuthGuard]}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

私の認証ガードでは、ユーザーが許可されていないルートにアクセスできないようにする条件を書きました。

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from 
'@angular/router';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean 
{
  if(["user","customer","cart"].indexOf(localStorage.pass)>=0){alert("auth 
guard!");
return true;}
else 
this.router.navigate(['/login']);
}
}

ビルド後、再構築中に検出されたloadChildrenの複製されたパスで警告警告が表示されます。検出された最新バージョンを取得して上書きし、再構築時間を節約します。ルートがオーバーラップしないことを検証するには、フルビルドを実行する必要があります。

だから私はそれをグーグルで見つけました このコメント 最後のパスにカンマを追加した後、警告は消えました。

しかし、その後、アプリケーションにログインして、コンソールに次のメッセージが表示されました。履歴状態の変更を調整して、ブラウザーがハングしてアプリが停止するのを防ぎます。

なぜアイデアがありますか？

編集：私はついに「canActivate」の代わりに「canLoad」を使用して動作するようになりましたが、誰かがこの問題に関するより多くの洞察を提供できれば素晴らしいと思います。

javascriptangularbrowser
11
Vibhu

ログインルートでcanActivateを削除します。ループです。

24
Paqura

Guardで、パスの1つがループとして複数回ロードしようとしていることを確認します。これが私の問題でした。

3
Nanda Kishore Allu

私の場合、無限ループが発生しました。

ルーティングでワイルドカード（*）を使用している場合、それがリストの最後のものであることを確認してください。最初に他のすべてのルートを定義する必要があります。

{ path '/', component: HomeComponent },
{ path 'profile', component: ProfileComponent },
// All your other routes should come first    
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }
3
Enrico

最近、同様の問題が発生し、コードを見て、2つのことに気付きました。-アクセスパスであるにもかかわらず、ログインパスにAuthguardを配置します。 -ガードに負の値を返さず、リダイレクトするだけです。

これらの2つの問題を修正してみてください。おそらく役立つでしょう。負の場合に値を返さなかったときに問題が発生し、それがあなたが経験しているのと同じ問題を引き起こしました。

2
bab2683

私はすでに一日中この問題を抱えていました。これも同様に見つかりました 公式投稿 、しかしここで問題を明確に説明するものはありません。

問題をデバッグしていましたが、canActivate関数にエラーがあり、初期化されていないオブジェクトのプロパティにアクセスしようとしました。私はそれに気づかず、このエラーの後（コンソールには表示されません）、「ブラウザーのハングを防ぐために履歴状態の変更を調整する」という問題がloppで発生し始めました...

ちょうど私の2セント：関数canActivateまたはcanDeactivateにエラーがないことを確認してください。

それが誰かを助けることを願っています！

乾杯

0
MiguelSsSRrR