刷新另一个页面时，角路由重定向到主页

Question

在我的应用程序中，用户登录后我有一个主页和一些其他页面。问题是，当我在其中一个页面中刷新页面时，它会再次将我发送到主页。这是我的路线：

const routes: Routes = [
  {
    path: '', redirectTo: '/home', pathMatch: 'full'
  },
  {
    path: 'login',  component: LoginComponent 
  },{
    path: 'list',  component: ListComponent, canActivate : [AuthGuardService]
  },{
    path: 'home', component: HomeComponent, canActivate : [AuthGuardService]
  },{
    path: 'detail/:id',  component: HomeComponent, canActivate : [AuthGuardService],
  },{
    path: '**', redirectTo: 'login' ,pathMatch: 'full'
  }
];

应用程序组件具有路由器出口

<div [ngClass]="{'container': (isLoggedIn$ | async), 'mt-2': (isLoggedIn$ | async)}" class="h-100">
    <router-outlet></router-outlet>
</div>

那么，我期待什么呢？首先，如果我是我的“列表”页面（localhost:4200/list）并且我刷新了这个页面，它应该留在那里。在那一页。但现在它将我重定向到本地主机：4200/home。当然，当我单击一个列表项时，它应该将我发送到本地主机：4200/detail/itemId，但它总是将我发送到主页。谢谢

使用AuthGuardService编辑：

export class AuthGuardService implements CanActivate {
  constructor(private route : Router, private store: Store<AppState>) {}

  canActivate() {
    return this.store
      .pipe(
          select(isLoggedIn),
          tap(loggedIn => {
              if (!loggedIn) {
                this.route.navigate(['login']);
              }
          })
      )  
  }
}

我添加登录效果

login$ = createEffect(() =>
        this.actions$
            .pipe(
                ofType(userActions.login),
                tap(action => {
                    localStorage.setItem('userInfo',
                    JSON.stringify(action.user))
                    this.router.navigate(['home']);
                })
            )
    ,{dispatch: false});

解决方案：

经过几个小时的调试，我找到了解决方案。基本上我删除了这个。路由器。导航（[“主页]）；在AuthGuardService中，我在用户登录后立即将其置于组件的登录功能中。把这个放进去。路由器。导航（[“主页]）；在AuthGuardService中，每次我刷新页面时，它都会触发该防护，因此每次它都会在家中重定向我。就是这样。谢谢

Answer 1

我看到你解决了你的问题，但想报告发生在我身上的事情，因为它吞噬了我几天的时间。在我的例子中，我们希望在一个新选项卡中打开一个特定的路由，这与其他路由不同。

<a *ngIf=link.externalRoute href={{link.route}} target="_blank">

它一直在主页路由打开新标签。我检查了我的路由、身份验证、身份验证、代码中的手动导航，什么也找不到。

结果发现我的路线名称错了。我有“目标路线”，但应该有“#/目标路线”！丢失的哈希符号使路由无效，因此它将返回到默认路由。

当然，这只在你碰巧在角度路由中使用哈希的情况下有用，但也许有一天这会对某人有所帮助。

Answer 2

路由的顺序很重要，因为路由器在匹配路由时使用第一次匹配获胜策略，所以更具体的路由应该放在不太具体的路由之上。

• 首先列出具有静态路径的路由
• 后面是一个空路径路由，它与默认路由匹配。
• 通配符路由排在最后，因为它匹配每个URL。

只有当没有其他路由首先匹配时，路由器才会选择它。

参考号：https://angular.io/guide/router#route-订单号

所以你改变顺序如下

const routes: Routes = [
  {
    path: 'login',  component: LoginComponent 
  },{
    path: 'list',  component: ListComponent, canActivate : [AuthGuardService]
  },{
    path: 'home', component: HomeComponent, canActivate : [AuthGuardService]
  },{
    path: 'detail/:id',  component: HomeComponent, canActivate :  [AuthGuardService],
  }
  {
    path: '', redirectTo: '/home', pathMatch: 'full'
  },
  ,{
    path: '**', redirectTo: 'login' ,pathMatch: 'full'
  }
];