ngIf 用户登录显示组件

Question

我正在制作一个应用程序，需要让没有帐户的用户可以访问，但是一旦有人创建帐户，他们就需要能够看到其他功能，并且它也需要响应。

为了响应速度，我使用 material design for bootstrap and angular materialmdbootstrap。在下面的示例中，我想根据用户是否登录将 mdb-col-size 从 9 更改为 12，因此不显示保存，...选项。

<div>
  <div class="row ">
    <div class="col-lg-9 col-md-8 col-sm-6 ">
      <div class="row  ">
        <div class="col-md-12 mb-12">
          <div class="card testimonial-card  ">
            <div class="card-up lighten-1 ">
              <div class="card-body">
                <h4 class="card-title">{{ dare.title }}</h4>
                <hr />
                <p>{{ dare.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6"><!--this shouldn't be displayed when someone is not logged in-->
      <div class="row">
        <div class="col-12">
          <button mat-raised-button class="btn btn-block">
            Save
          </button>
        </div>
      </div>

      <br />

      <div class="row">
        <div class="col-12">
          <button mat-raised-button class="btn btn-block">
            Challenge someone else
          </button>
        </div>
      </div>

      <br />

      <div class="row">
        <div class="col-12">
          <button mat-raised-button class="btn btn-block">
            Create new ...
          </button>
        </div>
      </div>
    </div>
  </div>
  <br />
</div>

我希望只有在有人登录时才能看到选项，并且响应会相应地发生变化。

提前致谢！

Answer 1

您应该在项目中使用 Guards，例如文档中的示例：https://angular.io/api/router/CanActivate

要实现它，您应该实现两个组件（一个用于经过身份验证的用户，另一个用于未经过身份验证的用户）。定义路由，例如：

{
    path: '',
    component: AuthenticatedUserComponent,
    canActivate: [AuthenticatedUserGuard]
},
{
    path: '',
    component: UnauthenticatedUserComponent
}

然后定义守卫：

@Injectable()
class AuthenticatedUserGuard implements CanActivate {

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
      return true; // here you should call a method from service, that 
                   // that holds whether user is authenticated or not 
    }
}

ngIf 用户登录显示组件

ngIf user is logged in show component

html

angular

mdbootstrap