Angular 2 redirect if user is logged in
You want to look at the resolve
property within the [Route
interface].
All of the following properties are available to a route:
export interface Route {
path?: string;
pathMatch?: string;
matcher?: UrlMatcher;
component?: Type<any>;
redirectTo?: string;
outlet?: string;
canActivate?: any[];
canActivateChild?: any[];
canDeactivate?: any[];
canLoad?: any[];
data?: Data;
resolve?: ResolveData;
children?: Routes;
loadChildren?: LoadChildren;
runGuardsAndResolvers?: RunGuardsAndResolvers;
_loadedConfig?: LoadedRouterConfig;
}
resolve
is designed to allow you to load some type of data before proceeding to the route. The signature for resolve
looks like this:
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<T>|Promise<T>|T
We can ignore that signature, however, and override it because, in this case, we want to redirect to /dashboard if the user is logged in. Otherwise, display /login route normally.
The solution is to create an injectable
class and attach it to the login route's resolve
property.
@Injectable()
export class IsLoggedIn {
constructor(
private router: Router,
private authService: AuthService) {
}
resolve(): void {
if (this.authService.isAuthenticated) this.router.navigate(['/dashboard'])
}
}
On your /login route, add the resolve property.
{
path: 'login',
component: LoginComponent,
resolve: [IsLoggedIn]
}
Import the class in AppModule
and add it to providers
.
providers: [
IsLoggedIn
]
Now anytime a logged in user attempts to go to /login, they'll be redirected to /dashboard without seeing the login page.
In this case I would probably redirect everything to DashboardComponent
using
{path: '', redirectTo: 'dashboard', pathMatch: 'full'}
and than the dashboard component can determinate if the user is logged in or not (as it has AuthGuard active), and if the user is not logged in it would redirect him to login.
Probably the quickest thing to do is to tweak your LoginComponent
.
Given that this.authService.isLoggedIn()
returns a boolean. In your LoginComponent
you can quickly check the state in ngOnInit
as below:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import {AuthService} from '<path_to_your_auth_service>';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
providers: []
})
export class LoginComponent implements OnInit {
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _authService: AuthService
)
ngOnInit() {
// get return url from route parameters or default to '/'
this.returnUrl = this._route.snapshot.queryParams['returnUrl'] || '/';
// CHECK THE isLoggedIn STATE HERE
if (this._authService.isLoggedIn()) {
this._router.navigate([this.returnUrl]);
}
}
// Rest fo the logic here like login etc
login() { }
}
Note that you're only adding this to ngOnInit
if (this._authService.isLoggedIn()) {
this._router.navigate([this.returnUrl]);
}