canActivate導致持續刷新-Angular2 +

Question

我正在嘗試在我的應用程序路由上使用canActivate功能，但是，每當我編譯該應用程序時，日志就會顯示不斷刷新的錯誤消息，而我已經將console.log（）的可見性提高了。

我在這里缺少什么嗎？

Answer 1

this.router.navigate([''], {queryParams: {returnUrl: state.url}});

每次未登錄時都會執行，從而導致像路由器配置中那樣無限重定向

{path: '', component: HomepageComponent, canActivate: [AuthGuard]},

為例如LoginComponent添加顯式路徑。 並且{path: '**', redirectTo: ''}還應指向某種CatchUnmatchedPathComponent，在其中用戶獲得某種形式的404頁面。

Answer 2

您將重定向到canActivate方法中的錯誤路由。 重定向到login 。 這是您需要進行的更改：

// if not logged in, navigate to login screen
this.router.navigate(['login'], {queryParams: {returnUrl: state.url}});

當您重定向到'' ，它將再次轉到canActivate守護程序，因此出現了無限循環。

Answer 3

您正在通過this.router.navigate([''], {queryParams: {returnUrl: state.url}});導航到root this.router.navigate([''], {queryParams: {returnUrl: state.url}}); 這會導致后衛再次踢入，因此進入循環。

試試this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});