I'm currently developing an application where, upon entering the page, the default route for the user is the "Login" page. However, I want to implement a condition based on whether the user has a local storage variable (id) set. If this variable exists, a method called isAuthenticated() will return true and the user should be redirected to the "Polls" page instead of the "Login" page.
I have thought of two approaches to tackle this issue:
1. Changing the default page: If the isAuthenticated() method returns true, the default page should be changed to "Polls". Otherwise, it should remain as "Login".
2. Redirecting the user: If the isAuthenticated() method returns true, the user should be automatically redirected to the "Polls" page.
Which approach would be more effective in achieving conditional routing? How can I implement either or both of these points?
Below is my routing configuration with the implementation of the isAuthenticated() method:
import {Component} from 'angular2/core'
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import 'rxjs/Rx'; // load the full rxjs
import {RouteConfig, ROUTER_DIRECTIVES, Router} from 'angular2/router';
import { PollsComponent } from './pollslist/pollslist.component'
import { Login } from './login/login'
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [ROUTER_DIRECTIVES, Login, PollsComponent],
providers: [HTTP_PROVIDERS]
})
@RouteConfig([
{ path: '/login', name: 'Login', component: Login, useAsDefault: true },
{ path: '/polls', name: 'Polls', component: PollsComponent }
])
export class AppComponent {
isAuthenticated() {
if (localStorage.getItem('id')) {
return true;
} else {
return false;
}
}
}