Как показать / Скрыть список навигации в Angular 4

Question

Я работаю над аутентификацией входа в систему со стеком MEAN. Я использую угловую 4 в передней части. Я пытаюсь реализовать показ / скрыть навигацию на основе входа в систему. Когда пользователь входит в систему, он должен показать навигационный список, но он не показывает его и не выдает никакой ошибки, а показывает только кнопку "Вход" до и после входа в систему. Здесь ниже мой код, может кто-нибудь, пожалуйста, помогите мне в этом, где я делаю ошибку. Для аутентификации Back-End-входа я использовал passport.js и экспресс-сессию. Я не использую токены JWT.

//navbar.component.html

<div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
              <ng-template *ngIf="isAuthenticated()"> <!-- Here I used [ngIf]="isAuthenticated()" as well still it doesn't work-->
                <li><a routerLink="/jobs">Jobs</a></li>
                <li><a routerLink="/users">Users</a></li>
                <li ><a routerLink="/register">Register a User</a></li>
              </ng-template>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <ng-template *ngIf="isAuthenticated()">
                <li><a (click)="onLogout()">Logout</a></li>
            </ng-template>
            <li *ngIf="!isAuthenticated()" routerLinkActive="active"><a routerLink="/login">Login</a></li>
        </ul>
</div>

//navbar.component.ts

export class NavbarComponent implements OnInit {
  constructor(private authService: AuthService, 
              private router: Router) { }
  ngOnInit() {
  }
  onLogout() {
    this.authService.logout()
      .subscribe(
        (res) => {
          if (res) {
            this.router.navigate(['/login']);
          }
        }
      );
  }
  isAuthenticated() {
    this.authService.isAuthenticated();
  }
}

//auth.service.ts

export class AuthService {
    url = 'http://localhost:3000/api/users'
    constructor(private router: Router,
                private http: HttpClient) {}
    signInWithEmailAndPassword (userDetails) {
        return this.http.post(this.url + '/login', userDetails, { observe: 'body', responseType: 'json'})
            .map(
                (response) => {
                    return response;
                }
            )
    }

    logout() {
        return this.http.get(this.url + '/logout')
            .map((response) => {return response})
    }

    isAuthenticated() {
        return this.http.get(this.url + '/is-logged-in')
            .map((response) => { return response })
    }
}

*********** Node.js BackEnd код ***********

//server.js

const userRoute = require('./routes/user-route');
app.use('/api/users', userRoute);

//user.router.js

userRoute.get('/is-logged-in', authMiddleware.isUserLoggedIn, authMiddleware.isUserActive, user.isLoggedInUser)

//authMiddleware.js

const authMiddleware = {
isUserActive: (req, res, next) => {
        req.user.isActive === true ? next() : res.status(401).send({message: 'No User Found!'});
    },
    isUserLoggedIn: (req, res, next) => {
        console.log('imcalled from auth');
        req.isAuthenticated() ? next() : res.status(401).send({message: 'You must be LoggedIn'});
    }
}

//user.controller.js

const user = {
    isLoggedInUser: (req, res) => {
        res.status(200).send(true);
    }
};

Answer 1

Попробуй использовать async труба, найденная по адресу https://angular.io/api/common/AsyncPipe.

Асинхронный канал подписывается на Observable или Promise и возвращает последнее выданное им значение. Когда выдается новое значение, асинхронный канал помечает компонент, который необходимо проверить на наличие изменений. Когда компонент уничтожается, асинхронный канал автоматически отписывается, чтобы избежать возможных утечек памяти.

Вы можете назначить isAuthenticated() к переменной и применить async к этому.

_isAuthenticated: Observable<any>
ngOnInit() {
  this._isAuthenticated = this.isAuthenticated();
}
isAuthenticated() {
  return this.authService.isAuthenticated();
}

И в HTML, *ngIf="_isAuthenticated | async", (Добавлять return isAuthenticated(), как RRForUI и Чау Чан воспринимается).

Другое решение - добавить логическую переменную и подписаться на наблюдаемую (это решение лучше, потому что, как сказал Бенедикт Шмидт, Angular вызывает сервер только один раз):

_isAuthenticated: boolean;
ngOnInit() {
  this.authService.isAuthenticated().subscribe(res => {
    this._isAuthenticated = res;
  });      
}

В этом решении функция isAuthenticated() больше не требуется, и в HTML вы используете только *ngIf="_isAuthenticated",

Наконец, вернитесь response.json() в auth.service.ts,

...
.map((response) => { return response.json() })