使用路由模块重定向

Question

我有一个登录页面，登录后，我将重定向到仪表板。仪表板上也有一些子程序页面。我需要当你登录并点击徽标，我被重定向到仪表板，如果我没有登录，我被重定向到登录页面。下面是我的代码示例：

navbar.component.html

<mat-toolbar>
    <h1>
      <a routerLink="/">
        <img src="../image.jpg"/>
      </a>
    </h1>
  </mat-toolbar>

routing.module.ts

.
.
.
const routes: Routes = [
  {
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      {
        path: 'login',
        component: ClientLayoutComponent,
        children: [
          { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
          {
            path: 'dashboard',
            component: DashboardComponent,
            canActivate: [DashboardGuard],
          },
          {
            path: 'account',
            component: AccountComponent
          },
          { path: 'Blog', component: BlogComponent },
        ],
      },
  },
];

这些步骤是如此明确：

1. 如果我没有登录，当我单击徽标时，它必须转到登录页面，或者
2. ，如果我是登录的，当我单击徽标时，它必须进入仪表板页面

。

Answer 1

我会将登录路径和仪表板路径分开。如果您想拒绝访问仪表板(如果没有登录)，我建议使用路由保护。

一种快速(肮脏)的方法是创建两个徽标链接，并根据用户登录与否提供正确的链接：

例如：

# in the component, create an variable that holds the value if a user is logged or not

<a *ngIf="userIsLoggedIn === false" routerLink="/login">
    <img src="../image.jpg"/>
</a>

<a *ngIf="userIsLoggedIn() === true" routerLink="/dashboard">
    <img src="../image.jpg"/>
</a>

其他选项:在您的徽标锚上做一个(click)="yourFunction()"。在yourFunction()中，您检查用户是否已登录，并将其导航到正确的页面。