javascript - How to update navigation bar after routing on some scenario in angular2 - Stack Overflow

admin管理员组

文章数量:1350023

I have a bootstrap navbar, on the right side of navigation bar, i have some links like login,logout, register I put it on my appponent.html.ts

<div class="navbar-collapse collapse">
// Here i check if user is authenticated, display : Hello [email protected]
<ul *ngIf="user" class="nav navbar-nav navbar-right">
          //code in here
</ul>
// If user is not authenticated, display Login - Register
<ul *ngIf="!user"  class="nav navbar-nav navbar-right">
  <li><a routerLink="/register" id="registerLink">Register</a></li>
  <li><a routerLink="/login" id="loginLink">Log in</a></li>
</ul>     

In loginponent.ts i call my Authen.Service.ts to get token that is store on localStorage

import { UrlConstants } from './core/mon/url.constants';
import { LoggedInUser } from './core/domain/loggedin.user';
import { SystemConstants } from './core/mon/system.constants';


@Component({
  selector: 'app-login',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './loginponent.html',
  styleUrls: ['./loginponent.css']
})
    export class LoginComponent implements OnInit {
      public user: any;
      private isLoggedIn = false;


  loginUser(valid: boolean) {
    this.loading = true;
    if (valid) {
      const userData = {
        username: this.form.controls.username.value,
        password: this.form.controls.password.value
      }

      this._authenService.login(userData.username, userData.password).subscribe(data => {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        // If success redirect to Home view
        this._router.navigate([UrlConstants.HOME]);
      }, error => {
        this.loading = false;
      });

    }
  }  
  ngOnInit() {

  }

}

Here is my Authen.Service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map';

import { SystemConstants } from '../mon/system.constants';
import { LoggedInUser } from '../domain/loggedin.user';


@Injectable()
export class AuthenService {

  constructor(private _http: Http) {
  }

  login(username: string, password: string) {
    let body = "userName=" + encodeURIComponent(username) +
      "&password=" + encodeURIComponent(password) +
      "&grant_type=password";
    let headers = new Headers();
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    let options = new RequestOptions({ headers: headers });

    return this._http.post(SystemConstants.BASE_API + '/api/oauth/token', body, options).map((response: Response) => {
      let user: LoggedInUser = response.json();
      if (user && user.access_token) {
        localStorage.removeItem(SystemConstants.CURRENT_USER);
        localStorage.setItem(SystemConstants.CURRENT_USER, JSON.stringify(user));
      }
    });
  }

  logout() {
    localStorage.removeItem(SystemConstants.CURRENT_USER);
  }

  isUserAuthenticated(): boolean {
    let user = localStorage.getItem(SystemConstants.CURRENT_USER);
    if (user != null) {
      return true;
    }
    else
      return false;
  }

Here is my appponent.ts

    export class AppComponent implements OnInit {

    // the user object got from localStore 
    ngOnInit() {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        console.log(this.user);
      }
}

The problem i got is i cant update the navbar to change in right state (It still work, i have the token but i have to refresh the whole page to update the nav bar)

How can i update the navigation bar in angular way? Thanks

I have a bootstrap navbar, on the right side of navigation bar, i have some links like login,logout, register I put it on my app.ponent.html.ts

<div class="navbar-collapse collapse">
// Here i check if user is authenticated, display : Hello [email protected]
<ul *ngIf="user" class="nav navbar-nav navbar-right">
          //code in here
</ul>
// If user is not authenticated, display Login - Register
<ul *ngIf="!user"  class="nav navbar-nav navbar-right">
  <li><a routerLink="/register" id="registerLink">Register</a></li>
  <li><a routerLink="/login" id="loginLink">Log in</a></li>
</ul>     

In login.ponent.ts i call my Authen.Service.ts to get token that is store on localStorage

import { UrlConstants } from './core/mon/url.constants';
import { LoggedInUser } from './core/domain/loggedin.user';
import { SystemConstants } from './core/mon/system.constants';


@Component({
  selector: 'app-login',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './login.ponent.html',
  styleUrls: ['./login.ponent.css']
})
    export class LoginComponent implements OnInit {
      public user: any;
      private isLoggedIn = false;


  loginUser(valid: boolean) {
    this.loading = true;
    if (valid) {
      const userData = {
        username: this.form.controls.username.value,
        password: this.form.controls.password.value
      }

      this._authenService.login(userData.username, userData.password).subscribe(data => {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        // If success redirect to Home view
        this._router.navigate([UrlConstants.HOME]);
      }, error => {
        this.loading = false;
      });

    }
  }  
  ngOnInit() {

  }

}

Here is my Authen.Service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map';

import { SystemConstants } from '../mon/system.constants';
import { LoggedInUser } from '../domain/loggedin.user';


@Injectable()
export class AuthenService {

  constructor(private _http: Http) {
  }

  login(username: string, password: string) {
    let body = "userName=" + encodeURIComponent(username) +
      "&password=" + encodeURIComponent(password) +
      "&grant_type=password";
    let headers = new Headers();
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    let options = new RequestOptions({ headers: headers });

    return this._http.post(SystemConstants.BASE_API + '/api/oauth/token', body, options).map((response: Response) => {
      let user: LoggedInUser = response.json();
      if (user && user.access_token) {
        localStorage.removeItem(SystemConstants.CURRENT_USER);
        localStorage.setItem(SystemConstants.CURRENT_USER, JSON.stringify(user));
      }
    });
  }

  logout() {
    localStorage.removeItem(SystemConstants.CURRENT_USER);
  }

  isUserAuthenticated(): boolean {
    let user = localStorage.getItem(SystemConstants.CURRENT_USER);
    if (user != null) {
      return true;
    }
    else
      return false;
  }

Here is my app.ponent.ts

    export class AppComponent implements OnInit {

    // the user object got from localStore 
    ngOnInit() {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        console.log(this.user);
      }
}

The problem i got is i cant update the navbar to change in right state (It still work, i have the token but i have to refresh the whole page to update the nav bar)

How can i update the navigation bar in angular way? Thanks

• javascript
• html
• css
• angular
• typescript

Share Improve this question Follow edited Jun 25, 2017 at 14:51 mkzpizza asked Jun 25, 2017 at 14:28 mkzpizzamkzpizza 8122 silver badges55 bronze badges 6

• Given html code is in login.ponent.html? – Maciej Treder Commented Jun 25, 2017 at 14:31
• No, it's in app.ponent.html, i have login.ponent.html as well, it in another module, i want to navigate to home page which is app.ponent.html if login success and change the navbar something like Hello, abc@ – mkzpizza Commented Jun 25, 2017 at 14:38
• Does you provide user value to app ponent? Can you attach code of app.ponent? – Maciej Treder Commented Jun 25, 2017 at 14:40
• ment the line changeDetection: ChangeDetectionStrategy.OnPush, and than try and let us know if it works. – Dhyey Commented Jun 25, 2017 at 14:43
• sorry, it's not working, only if i refresh the whole page it work – mkzpizza Commented Jun 25, 2017 at 14:47

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 9

As i understood your problem it is: How to hide "login" link located on main ponent after user signed himself in

I can think about solution like following:

Inside your AuthService you can add public boolean member "isLoggedIn":

  @Injectable()
  export class AuthService {
     isLoggedIn = false;
  }

You can share this service between ponents

Inside login ponent you can set isLoggedIn to true after successful login

login(){

 this.auth.isLoggedIn = true

}

In your app.ponent you can subscribe to NavigationEnd event of the router :

 export class AppComponent {
  constructor(
  private router: Router, private auth:AuthService){}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event.constructor.name === "NavigationEnd") {
       this.isLoggedin = this.auth.isLoggedIn;
      }
    })
  }

}

And then, in app ponent template you can show "login" menu with *ngIf="!isLoggedin"

here is plunker hope it helps...

In the AuthenService, use a BehaviorSubject to municate changes in the user's authentication status. Subscribe to this in the AppComponent and update the user variable accordingly. The navigation bar will update automatically without needing a page refresh.

1. inside AuthenService, declare a BehaviorSubject:

   private userSubject = new BehaviorSubject<LoggedInUser>(null); user$: Observable<LoggedInUser> = this.userSubject.asObservable();

2. inside login and logout methods, emit a new value for the userSubject:

   this.userSubject.next(user)

3. inside AppComponent, subscribe to the user$ observable and update the user variable:

   this.authenService.user$.subscribe(user => this.user = user)

whenever the user logs in or out, the user variable in AppComponent will automatically be updated and the navigation bar will reflect the current state.

本文标签： javascriptHow to update navigation bar after routing on some scenario in angular2Stack Overflow