canActivate导致持续刷新-Angular2 +

Question

我正在尝试在我的应用程序路由上使用canActivate功能，但是，每当我编译应用程序时，日志就会不断刷新，并显示我为console.log（）可见的失败消息。

我这里缺少什么吗？

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button onclick='insertHtml()'> Insert HTML </button> <div id='target'> </div> <button id="getValue"> getvalue </button>

每次未登录时都会执行，因此会导致无限重定向，就像在路由器配置中一样

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

添加一个明确的路径，例如LoginComponent。 并且{path: '', component: HomepageComponent, canActivate: [AuthGuard]},还应该指向某种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(['/login'], {queryParams: {returnUrl: state.url}});