Question

我希望基本网址/根据用户是否已登录显示不同的内容：

未登录：显示LandingPageComponent。
已登录：显示DashboardComponent。

为了清楚起见，/不应该重定向或更改网址，它应该只决定显示哪些内容。

这是一个相当常见的事情（例如，Twitter就是这样做的。）但问题是，我是Angular的新手，到目前为止我还没有找到一种直接的方法来做到这一点。我知道如何将不同的路径路由到不同的组件，但我不知道如何有条件地将单个路径路由到多个组件。最好的方法是什么？

请尽量保持任何答案对初学者友好。谢谢你的帮助。

Answer 1

以上可以通过以下步骤完成

步骤1：默认显示一个HomeComponent，其中包含html代码

第二步：在HomeComponent的构造函数/ ngOnInit（取决于具体情况）中决定使用是否登录。

注意：isLoggedIn是一个Observable。即isLoggedIn：Observable;

HomeComponent模板如下所示

<template [ngIf]="isLoggedIn | async">
<dashboard></dashboard>
</template>
<template [ngIf]="(!isLoggedIn | async)">
<login-page></login-page>
</template>

Answer 2

在NG2中实现这一点非常简单。你必须遵循以下原则：

首先，您必须知道需要使用Guard作为您的路线，这是四种不同的防护类型：

CanActivate可以调整导航到路线。

CanActivateChild调解导航到子路线。

CanDeactivate可以调解远离当前路线的导航。

解析以在路由激活之前执行路径数据检索。

CanLoad调解导航到加载的功能模块   异步。

为了注册，你应该在NgModule提供：

@NgModule({
   providers: [AuthService, UserEditGuard, UserEditGuard2],
...
})

在我继续之前，我会提到Guards可以用不同的方式实现，但毕竟它真的归结为一个返回 Observable ， Promise 的函数或者布尔。但是，当您宣布路线时，您应该使用canActivate

export const USER_ROUTE: Routes = [
      {path: 'edit', component: UserEditComponent, canActivate: [UserEditGuard],canDeactivate: [UserEditGuard2]}
    ];

然后为这个Guard定义你的类，一个例子应该如下：请注意，警卫需要依赖注入功能。因此，为登录验证定义一个类似乎是必要的。

import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import { AuthService } from './auth.service'; // assuming you have auth service

import {Observable} from "rxjs";

export class UserEditGuard implements CanActivate {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot,private authService: AuthService): Observable<boolean> | boolean {
      return confirm('you are not logged in!');
      // for example you can have your service authenticate
      // return this.authService.isLoggedIn().map(e => {
      //  if (e) {
      //      return true;
      //  }
      // }).catch(() => {
      //    this.router.navigate(['/login']);
      //    return Observable.of(false);
      // });
  }

}

了解更多信息，I recommend reading angular.io documents。

我希望我能帮助您了解如何保护您的路线并重定向到其他路线。

更新：

我们会在评论中讨论您的请求。

export class AppComponent {
               // Include authService in the constructor to gain access to the API's in the view
  constructor(private authService: AuthService) {}
}

然后在模板中：

  <div class="col-sm-12" *ngIf="!authService.isLoggedIn()">
    <div class="jumbotron text-center">
      <h2> You need to Logging In to see your dashboard</h2>
    </div>
  </div>

  <div class="col-sm-12" *ngIf="authService.isLoggedIn()">
    <div class="jumbotron text-center">
      <h2>View Private Dashboard</h2>
      <a class="btn btn-lg btn-success" routerLink="/dashboard">my dashboard</a>
    </div>
  </div>

它将根据* ngIf的结果更新DOM。您可以将其添加到您的主页，但您还需要保护私人路线。

Angular2：如果用户已登录，则提供不同的主页

2 个答案: