Почему не меняется значения на false в AuthGuard?

Question

[kikosko]

В темплейте компонента "AppComponent" в зависимости от значения переменой "this.loggedInService.isLoggedIn", идет переключение между методами " logIn()" и "logout()", которые в тс компонента "AppComponent" подписаны на эти методы в сервисе "LoggedinService" и в зависимости от метода меняют значения переменой на true или false. Так же в методе гварда "checkLogin(url: string)" возвращаю true или false в зависимости от значения переменной "this.loggedInService.isLoggedIn". При запуске приложения, я не могу войти в модуль, когда нажимаю на вход, могу, но когда нажимаю на выход, то все равно могу зайти на модуль. Как сделать рабочим переключатель в "checkLogin" что бы аутентификация работала корректно и сохранять значение переключения состояния между входом и выходом при перезапуске страницы ?

AppComponent.html:

<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>

AppComponent.ts

export class AppComponent implements OnInit {

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

    ngOnInit() {}

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

    logout(): void {
        this.loggedInService.logout();
    }
}

LoggedinService:

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

    constructor() {}

    login(): Observable<boolean> {
        return of(true).pipe(
            delay(100),
            tap(val => this.isLoggedIn = true)
        );
    }

    logout(): boolean {
        return this.isLoggedIn = false;
    }
}

AuthGuard:

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

    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;
        }
        }
}

Answer 1

[Александр]

Не совсем понятна проблема. Нужна песочница. Я попытался собрать твой пример. https://stackblitz.com/edit/angular-toster1 , но всё-равно не понял, что нужно.