javascript - 如何在 Angular 8 中隐藏标题组件的导航栏按钮以防止路由？

Question

如何在导航到登录页面时隐藏/显示导航栏按钮。

Ex- 在我的应用程序组件中，我有页眉组件、路由器 socket 和页脚组件 在我的标题组件中，我有大约 5 个导航按钮，例如 - 登录、注册、关于、联系我们等。现在，我想要的是，如果有人单击“登录”，那么登录表单就在那里，当有人登录并移动到仪表板页面时，标题就会出现不应包含登录和注册选项。

Ex-再次通知标题页。下面是我的代码 -

AppComponent.html

 <app-header></app-header>

 <router-outlet></router-outlet>

 <app-footer></app-footer>

app-routing.module.ts

const routes: Routes = [
      { path: '', component: HomeComponent },
      {path:'registration', component: RegistrationComponent},
      {path: 'login', component: LoginComponent},
      {path: 'dashboard', component: DashboardComponent},
      {path: 'header', component: HeaderComponent},
    ];

HeaderComponent.html

<div class="navbar-nav ml-auto">

            <a class="nav-item nav-link" routerLink="/login"><h4>Login</h4></a>
            <a class="nav-item nav-link" routerLink="/registration"><h4>Register</h4></a>
            <a class="nav-item nav-link" routerLink="/about"><h4>About</h4></a>
            <a class="nav-item nav-link" routerLink="/dashboard"><h4>Dashboard</h4></a>

 </div>

 So, How can i hide Login, Registration option once logged in successfully

Answer 1

有很多方法可以实现。 这取决于您的登录机制。 假设用户已登录，并且您正在存储用户的一些凭据(JWT token 或其他一些属性)。 通常它存储在您的本地存储中，以便于引用。

所以，答案基本上是 -> 所有导航链接上的 user *ngIf。

在 html 中。

<a *ngIf="!loggedIn()" class="nav-item nav-link" routerLink="/login"><h4>Login</h4></a>
<a *ngIf="!loggedIn()" class="nav-item nav-link" routerLink="/registration">Register</h4></a>

在您的 .ts 文件中。

loggedIn() {
           return localStorgae.getItem("some credential you stored while user logged In") ? true : false;
}

此外，如果您使用类似上述解决方案的解决方案，请不要忘记在用户注销时从本地存储中删除这些值。

所以，在登录期间

login() {
  // all your authentication code.
  localStorage.setItem("loggedIn", "value");
}

//无论何时需要检查登录情况，都可以使用 localStorage.getItem("loggedIn");