Скрыть элементы, если пользователь вошел в систему

Question

У меня есть app.component.html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class='container'>
    <ul class="nav navbar-nav">
      <li class='nav-item'>
        <a class='nav-link' routerLink="/">Strona główna</a>
      </li>
      <li class='nav-item'>
        <a class='nav-link' routerLink="/about">O nas</a>
      </li>
      <li class='nav-item' *ngIf='!user'>
        <a class='nav-link' routerLink="/login">Zaloguj</a>
      </li>
      <li class='nav-item' *ngIf='!user'>
        <a class='nav-link' routerLink="/register">Zarejestruj</a>
      </li>
      <li class='nav-item' *ngIf='user'>
        <a class='nav-link' routerLink="/logout">Wyloguj</a>
      </li>
    </ul>
  </div>
</nav>
<main>
  <router-outlet></router-outlet>
</main>

Я пытаюсь показать кнопку /logout, если пользователь вошел в систему, и скрыть ее в противном случае, и показать кнопки /login и /register, если пользователь не вошел в систему.

Вот моя логика входа в систему:

import {Component} from '@angular/core';
import {AuthService} from '../core/auth.service';
import {Router, Params} from '@angular/router';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'page-login',
  templateUrl: 'login.component.html',
  styleUrls: ['login.scss']
})

export class LoginComponent {
  loginForm: FormGroup;
  errorMessage: string = '';

  constructor(
    public authService: AuthService,
    private router: Router,
    private fb: FormBuilder
  ) {
    this.createForm();
  }

  createForm() {
    this.loginForm = this.fb.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  tryFacebookLogin() {
    this.authService.doFacebookLogin()
      .then(res => {
        this.router.navigate(['/user']);
      });
  }

  tryTwitterLogin() {
    this.authService.doTwitterLogin()
      .then(res => {
        this.router.navigate(['/user']);
      });
  }

  tryGoogleLogin() {
    this.authService.doGoogleLogin()
      .then(res => {
        this.router.navigate(['/user']);
      });
  }

  tryLogin(value) {
    this.authService.doLogin(value)
      .then(res => {
        this.router.navigate(['/user']);
      }, err => {
        console.log(err);
        this.errorMessage = err.message;
      });
  }
}

Пример функции doLogin:

doLogin(value){
  return new Promise<any>((resolve, reject) => {
    firebase.auth().signInWithEmailAndPassword(value.email, value.password)
    .then(res => {
      resolve(res);
    }, err => reject(err))
  })
}

Я новичок в Angular. Я работал в основном с Express до сих пор. Я думал установить что-то вроде переменной сеанса, чтобы сохранить, вошел ли пользователь в систему или нет. Как я могу сделать это в Angular?

Answer 1

Как вы и просили в комментариях к принятому ответу, вы решили использовать стратегию LocalStorage, чтобы проверить, вошел ли пользователь в систему.

Я предлагаю вам создать сервис для управления всеми средствами аутентификации:

auth.service.ts

import { LocalStorageService } from 'angular-2-local-storage';

@Injectable()
export class AuthService {

  constructor(private http: Http, private localStorage: LocalStorageService) { }

 login(email: string, password: string): Observable<any>{
   //  Do Stuff  .....;
   //  if successfull set to LocalStorage
}

  isAuthenticated(): boolean{
    if (this.localStorage.get('isLoggedIn')){
      return true;
    }
    else{
      return false;
    }
  }

}

Теперь в любой из ваших компонентов вы можете добавить эту услугу и просто позвонить следующим образом:

your.component.ts

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

  constructor(private authService: AuthService) { }
  let isLoggedIn = false;    


  ngOnInit() {

    isLoggedIn  = this.authService.isAuthenticated();

    if (isLoggedIn){
      alert('hello');
    }
  }

Теперь вы можете использовать переменную isLoggedIn в своем шаблоне с *ngIf

Answer 2

В вашем компоненте вы можете иметь переменную, которая хранит статус входа пользователя.Таким образом, наряду с навигацией по маршруту /user вы также хотели бы выполнить this.isAuthenticated= true, как указано ниже.

Когда вы выходите из системы , убедитесь, что вы установили это значение false.

this.isAuthenticated = false;

Это может быть пример кода компонента:

import {Component} from '@angular/core';
import {AuthService} from '../core/auth.service';
import {Router, Params} from '@angular/router';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'page-login',
  templateUrl: 'login.component.html',
  styleUrls: ['login.scss']
})

export class LoginComponent {
  isAuthenticated:boolean = false;
  loginForm: FormGroup;
  errorMessage: string = '';

  constructor(
    public authService: AuthService,
    private router: Router,
    private fb: FormBuilder
  ) {
    this.createForm();
  }

  createForm() {
    this.loginForm = this.fb.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  tryFacebookLogin() {
    this.authService.doFacebookLogin()
      .then(res => {
        this.isAuthenticated = true;
        this.router.navigate(['/user']);
      });
  }

  tryTwitterLogin() {
    this.authService.doTwitterLogin()
      .then(res => {
      this.isAuthenticated = true;
        this.router.navigate(['/user']);
      });
  }

  tryGoogleLogin() {
    this.authService.doGoogleLogin()
      .then(res => {
      this.isAuthenticated = true;
        this.router.navigate(['/user']);
      });
  }

  tryLogin(value) {
    this.authService.doLogin(value)
      .then(res => {
        this.isAuthenticated = true;
        this.router.navigate(['/user']);
      }, err => {
        this.isAuthenticated = false;
        console.log(err);
        this.errorMessage = err.message;
      });
  }

  logOut(){
    //write logout from server here
    this.isAuthenticated = false;
  }
}

Тогда на вашем шаблоне вы будете делать

<div *ngIf="isAuthenticated>Show Logout button</div>
<div *ngIf="!isAuthenticated">Show Login button</div>

Answer 3

Firebase предлагает объект аутентификации через библиотеку. Сохраните результат подключения в переменную, которую вы сможете отобразить.

import * as firebase from 'firebase/app';

randomFunction() {
  firebase.auth().onAuthStateChanged(user => {
    if(user) {
      this.logged = true;
    } else {
      this.logged = false;
    }
  });
}

В вашем HTML

<div *ngIf="logged; else #isAnonymous">
  <button>Log out</button>
</div>
<ng-template #isAnonymous>
  <button>Log in</button>
</ng-template>

Answer 4

Просто установите переменную isLoggedIn на уровне вашего компонента (или LocalStorage для доступа к ней во всем приложении). После успешной аутентификации пользователя вы можете установить для него значение true / false.

Используйте *ngIf на уровне компонентов для отображения любой информации, основанной на логине