时间戳

首页 > 解决方案 > 登录后隐藏侧边栏

javascript - 登录后隐藏侧边栏

问题描述

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

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>

登录组件.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

标签： javascripthtmlangulartypescriptbootstrap-4

解决方案

将登录方法从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，这样当您在登录组件中更新它时，它的值也会在应用程序组件中反映。

推荐阅读