登录后隐藏侧边栏

Posted 2023-03-05

【中文标题】登录后隐藏侧边栏

【英文标题】：Hide side bar after login

【发布时间】：2021-08-12 12:51:47

【问题描述】：

我想要一个响应式页面，当登录页面被加载时，它应该隐藏侧边栏并且登录页面应该跨越整个页面。用户登录后，它应该显示包含所有组件的侧栏。我用下面的代码尝试了几种方法。

app.component.html：

<div class="row">
  <div *ngIf="isLoggedUser == 'true'" class="col-lg-3 col-md-3 col-sm-3">
    <app-sidebar></app-sidebar>
  </div>
  <div class="col-lg-9 col-md-9 col-sm-9">
    <router-outlet></router-outlet>
  </div>
</div>

app.component.ts

import  Component, OnInit, VERSION  from '@angular/core';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 
  name = 'Angular ' + VERSION.major;
  isLoggedUser: any;

  ngOnInit() 
    this.isLoggedUser = sessionStorage.getItem('isLogged');
    if (sessionStorage.getItem('isLogged') === 'true') 
      this.isLoggedUser = 'true';
     else 
      this.isLoggedUser = 'false';
    
  

login.component.html

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" (click)="login()" class="btn btn-primary">Submit</button>
</form>

login.component.ts

import  Component, OnInit  from '@angular/core';
import  Router, ActivatedRoute  from '@angular/router';

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
)
export class LoginComponent implements OnInit 
  isLoggedUser: any;

  constructor(private router: Router) 

  ngOnInit() 
    sessionStorage.setItem('isLogged', 'false');
  

  login() 
    this.isLoggedUser = sessionStorage.setItem('isLogged', 'true');
    this.router.navigate(['/users']);
  

这里我试图在会话存储中存储一个变量，在用户登录之前，isLoggedUser 标志将为 false，因此不会显示侧边栏。一旦用户单击登录， isLoggedUser 将变为 true ，但在我重新加载页面之前不会显示侧栏。有人可以指导代码中的错误/错误是什么。并且页面对中小屏幕没有响应

StackBlitz（演示）：stackblitz

【参考方案1】：

将登录方式从login.component.ts改成这个：

login() 
    this.isLoggedUser = 'true';
    sessionStorage.setItem('isLogged', 'true');
    this.router.navigate(['/users']);
  

注意：sessionStorage.setItem('isLogged', 'true'); 不返回任何内容，因此 this.isLoggedUser 被设置为 undefined

我刚换了

this.isLoggedUser = sessionStorage.setItem('isLogged', 'true');

与

this.isLoggedUser = 'true';
sessionStorage.setItem('isLogged', 'true');

还需要共享变量isLoggedUser，这样当您在登录组件中更新它时，它的值也会在应用组件中反映。

【讨论】：

那么如何检查 app.component.ts 中的侧边栏条件？ @shivaji

查看如何通过服务here共享变量