Angular2 router

Question

I have been creating a web application with Angular2 and Firebase, first I check if the user is authenticated or not, if user is authenticated, he will be redirect to a page that contains the list of groups otherwise he will be redirect to a login page.
The problem is that the menu and the header are always visible. I want the menu and the header of the application will not be displayed when user redirect to login page. how I can do this.

app.component.ts

  constructor(public af: AngularFire,private  router:Router){
      this.af.auth.subscribe(auth => {
     if(auth) {
       this.userconnected = auth;
     }
}

app.component.html

<app-appheader *ngIf="userconnected"  [userconnected]="userconnected"></app-appheader>
<app-appmenu *ngIf="userconnected" [userconnected]="userconnected" data-spy="affix"></app-appmenu>
<div class="content-wrapper">
  <section class="content">
    <div class="row">
      <router-outlet></router-outlet>
    </div>
  </section>
</div>
<app-appfooter></app-appfooter>

app.routes.ts

  { path: 'groups', component: ListgroupsComponent, canActivate: [AuthGuard] },   
  { path: '', redirectTo: 'groups', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },

groups.component.ts

  ngOnInit() {
    console.log("ngOnInit list surveu");
    this.af.auth.subscribe(auth => {
      if(auth) {
        this.name = auth;
        this.ifInfoUser(this.name.auth.uid)
      }
    });
}


  ifInfoUser(idUser):boolean{
    console.log('BeginifInfoUser');
    const user = this.af.database.object('/users/'+idUser);
    user.subscribe(data => {
      console.log("data");
      if(data.uid!=null){
        this.existUser=true;
        this.router.navigate(['/groups']);
      }else{
        this.existUser=false;
        this.router.navigate(['/login']);
      }
    });

return this.existUser;
  }

Thanks in advance.

You want to use a guard that will check if the user is authenticated, and then decide what to do based on the information received. — Adam
– Adam, Commented Mar 20, 2017 at 23:00
I have already checked if user is connected or not "*ngIf="userconnected"" — naruto
– naruto, Commented Mar 20, 2017 at 23:04
What exactly is the issue? What about your current approach is not working for you? Is the menu always visible? If so you likely have a logic error. — Aluan Haddad
– Aluan Haddad, Commented Mar 21, 2017 at 0:50
yes, the problem is that the menu is always visible, even if the user redirect to the login page. — naruto
– naruto, Commented Mar 21, 2017 at 1:02

Rohit Luthra · Accepted Answer · 2017-05-10 13:05:44Z

1

Your approach is wrong. You are using router-outlet in your app.component.html with menu and header code that's why the menu and the header of the app will always be displayed when user redirects to login page. The problem is in your rendering because your login page is rendered inside your header and menu div code.

There could be many ways but according to me, your app should firstly show login page If the login is successful then It should redirect to some main page in which you will have header and menu as in your app.component.html.

edited May 10, 2017 at 13:05

answered May 10, 2017 at 12:58

Rohit Luthra

1,28617 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rohit Luthra Over a year ago

If this answer is correct. You can accept it so that it will be helpful for the further users.

dlcardozo · Accepted Answer · 2017-03-21 01:53:19Z

0

The issue is that you need to change your this.userconnectedstate on logout.

app.component.ts will check and set that value only inside of the constructor.

Try to subscribe to onAuthStateChanged and set there your this.userconnected state.

answered Mar 21, 2017 at 1:53

dlcardozo

4,0231 gold badge21 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular2 router

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related