我怎样才能用角弹护罩管理我的海军呢？

Question

我对管理我的Navbar感到有点困惑，如果用户没有经过身份验证，就不应该看到它，下面是我的LoginComponent：

          public validLogin:boolean=false;
      
      constructor(private router:Router,private authaervice:AuthService) { }
      signIn(credntials){
        this.authaervice.login(credntials)
         .subscribe(result=>{
             if(result){
              localStorage.setItem('token',result.toString());
              this.validLogin=true;
              return true;
                       }
                  false;
                     })
                     }
         canActivate(): boolean | UrlTree {
                 if(this.validLogin){
                 return true;
                                     }
                 this.router.navigate(['/app-dashboard']);
                }

在我的app.component.html中有：

  <router-outlet></router-outlet> 

这是我的肚脐组件：

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">
          
              <img src="assets/leitwind_logo.png" alt="logo">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" routerLink="/app-dashboard">Overview <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" routerLink="/app-events">EventLog</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" routerLink="/app-turbine-comparison">TurbineComparison</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" routerLink="/app-overview">AccessInfo</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#" >Exit </a>
                </li>
              </ul>
            </div>
          </nav>

现在，首先，如果用户是经过身份验证的，那么我应该把我的NavBarComponent放在哪里，而不是所有的组件都能看到它？

这是我的app.module，我有我的面包

    RouterModule.forRoot([
                   
                      {path:'',component:LoginComponent},
                      {path:'app-events',component:EventsComponent},
                      {path:'app-turbine-comparison',component:TurbineComparisonComponent},
                      {path:'app-dashboard',component: DashboardComponent},
                      {path:'app-overview',component: OverviewComponent}

                                                                     ]), 

Answer 1

处理此问题的一种方法是拥有一个可以在所有页面上自由加载的核心组件。这通常有您的页眉和页脚控件，而没有其他任何控件。

在页眉和页脚之间插入导航组件指令作为子指令。

在导航组件上，定义导航部分和内容部分。将路由器插座插入内容部分。

现在，为了显示/隐藏基于身份验证的过程，我找到了一种简单的方法来设置一个名为isLoggedIn的bool变量。为此，我使用了一个behavoirSubject，它是在您的身份验证服务器/系统/进程的返回回调中设置的。

设置您的作者检查登录状态，并转移到未经认证或令牌已过期等未经授权的页面。

{ path: 'navigation', canActivate: [AuthGuard], component: NavigationComponent },

记住，作者在url上工作，您的导航组件是每个url的一部分，因此它会触发每个url更改(这就是您想要的)。

考虑到这一点，您可以将导航菜单/控件等设置为以"isLoggedIn“为true为条件。例如：*ngIf="(dataSvc.loggedIn$ | async)"

我理解这是一个简单的概要说明，但是如果需要的话，我很乐意提供示例代码。