Redirect loggedout user to login in angular2

Question

I want to redirect user to login page when he is logged out for some url which is only accesible by a logged in user. I have to do this for my whole website. I have found some answers on stackoverflow but then I am confused if how I have to implement redirecting in my code so the whole website can be redirected to login page. I am using angular2. I am new to typescript. Can you guide me to some page or links where I can see where I have to write code to redirect as its a single page application. Please help.

I'm voting to close this question as off-topic because Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, [describe the problem](https://meta.stackoverflow.com/questions/254393/what-exactly-is-a-recommendation-question) and what has been done so far to solve it. — Deep 3015, Nov 25 '17 at 07:06
Hey, I asked for a link or tutorial if people aren't able to explain it to me here. Sometimes people give github links or blogs link or stackoverflow answers as well. — Pragya Sharma, Nov 25 '17 at 07:29
Check SO [how-to-ask](https://stackoverflow.com/help/how-to-ask) — Deep 3015, Nov 25 '17 at 07:34
https://stackoverflow.com/questions/34331478/angular-redirect-to-login-page — AT82, Nov 25 '17 at 08:07

score 0 · Accepted Answer · answered Nov 25 '17 at 07:08

0

Maybe just routerLink to login route after logout event is finished?

    import { Router } from '@angular/route';

    constructor(private router: Router) {}

    onLogout() {
        //some logout logics
        this.router.navigate(['/login']);
    }

given you set the route path to login as

   {path: 'login', Component: LoginComponent }

answered Nov 25 '17 at 07:08

Moruling James

136
8

The situation is, if im a logged in user and I share a link to a friend. When the friend tries to access the link it wont open because he isnt logged in and the webpage requires login. Then in this scenario i have to redirect user to login page by checking localstorage if he is logged in or not. I understand the concept I don't understand how to apply it on the whole website at once or do i hvae to do it one by one in all component. Plus I am new to typescript. – Pragya Sharma Nov 25 '17 at 07:32
but why would someone be able to access a page intended for logged user and they are not logged in? – Moruling James Nov 25 '17 at 08:44
its a verification page where user verifies himself by uploading his id proofs and other details. We are sending user a verification link after he place an order to verify himself. For this link user has to be logged in. So, I have to redirect user to login screen if he isn't logged in already. – Pragya Sharma Nov 25 '17 at 09:50
This happens with facebook as well when a friend of mine has shared a post link with me but the post wont open directly fb will take me to login page first and then navigate to the post. – Pragya Sharma Nov 25 '17 at 09:52

score 0 · Answer 2 · answered Nov 25 '17 at 10:32

You need to implement AuthGuard for this and use canActive in route.

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuardService implements CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (loggedIn) { // however you want to check if user is loggedin or not
      return true;
    }

    this.router.navigate(['/login'], {queryParams: {'back': state.url}});
    return false;
  }

}

And then in the routes use

  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuardService]
  }

Redirect loggedout user to login in angular2

2 Answers2