En el componente de plantilla AppComponent, según el valor, la variable this.loggedInService.isLoggedIn cambia entre los métodos logIn() y logout(), que en el componente de aplicación AppComponent están suscritos a estos métodos en el servicio LoggedinService y, según el método, cambie el valor de la variable a verdadero o falso.

También en el método de Guardia checkLogin (url: string) devuelvo verdadero o falso dependiendo del valor de la variable this.loggedInService.isLoggedIn

Todo funciona, pero cuando restablezco la página, necesito mantener el valor del botón de entrada o salida. Intento hacer esto en los métodos login() y logout() en el servicio, pero después de recargar la página, los cambios aún no se guardan. Ayude a resolver este problema para que los cambios permanezcan después de reiniciar la página.

plantilla de AppComponent:

          <li class="nav-item">
                <a class="btn btn-outline-success"
                   [class.btn-outline-success]="!this.loggedInService.isLoggedIn"
                   [class.btn-outline-danger]="this.loggedInService.isLoggedIn"
                   (click)="this.loggedInService.isLoggedIn ? logout() : logIn()">
                    {{this.loggedInService.isLoggedIn ? 'Exit' : 'Enter'}}
                </a>
            </li>

código de AppComponent:

export class AppComponent implements OnInit {

constructor(private loggedInService: LoggedinService,
            private router: Router) {
}

ngOnInit() {}

logIn(): void {
    this.loggedInService.login();
    if (this.loggedInService.isLoggedIn) {
        let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl :
            '/gallery';
        this.router.navigate([redirect]);
    }
}

logout(): void {
    this.loggedInService.logout();
    this.router.navigate(['/']);
}
}

LoggedinService:

export class LoggedinService implements OnInit {
    isLoggedIn: boolean = false;
    redirectUrl: string;

    constructor() {

    }

    ngOnInit() {
        this.CheckAuthentication();

    }
    enter code here
    CheckAuthentication(): boolean {
        if (localStorage.getItem('login') === 'true') {
            return this.isLoggedIn = true;
        } else if (localStorage.getItem('login') === 'false') {
            return this.isLoggedIn = false;
        }
    }

    login() {
        localStorage.setItem('login', 'true')
    }

    logout() {
        localStorage.removeItem('login');
        localStorage.setItem('login', 'false')
    }

AuthGuard:

export class AuthGuard implements CanActivate {
    constructor(private loggedInService: LoggedinService) {
    }

    canActivate(next: ActivatedRouteSnapshot,
                state: RouterStateSnapshot):  boolean{
        let url: string = state.url;
        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        if (this.loggedInService.isLoggedIn) {
            return true;
        } else {
            this.loggedInService.redirectUrl = url;
            return false;
        }
    }
}
0
Igor Shvets 16 oct. 2018 a las 14:35

2 respuestas

La mejor respuesta

El cambio es isLoggedIn para ser get método basado en el elemento localStorage

export class LoggedinService implements OnInit {

    redirectUrl: string;

    constructor() {}

    get isLoggedIn(): boolean {
       return localStorage.getItem('login') ? true : false;
    }

    login(){
     localStorage.setItem('login','true') 
    }

    logout(){
     localStorage.removeItem('login') 
    }

}

componente de aplicación

export class AppComponent {
  constructor(private loggedInService: LoggedinService,
    private router: Router) {
  }

  logIn(): void {
      this.loggedInService.login(); // set the state as login
      let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl :
        '/gallery';
      this.router.navigate([redirect]);
  }

  logout(): void {
    this.loggedInService.logout(); //// set the state as logout
    this.router.navigate(['/']);
  }
}

demo stackblitz

1
albarmavi 17 oct. 2018 a las 15:26

Tengo una duda con tu código.

En LoggedInService onInit, ¿por qué llamas a login() y logout() directamente?

this.CheckAuthentication();
this.login();
this.logout();

Hacer eso es agregar y eliminar de su localStorage . Además, puede verificar los datos en su almacenamiento local escribiendo localStorage en la consola del navegador. Creo que debería comentar o eliminar el método onInit

0
vijay krishna 16 oct. 2018 a las 11:42