Conditional routing change default route in Angular 2

Question

I'm creating an app that when the user enters to the page he goes to the default route wich is "Login" page. What I want is based on a condition (if the user has a local storage variable id, a method called isAuthenticaded() returns true if not false) the user must see the "Polls" page instead of "Login" page. I think two different ways to aprouch this:

1- Change default page: if the method returns true the default page should be "Polls" if not "Login".

2- Redirect the user: if the method returns true the user is redirected to "Polls".

What's the best aprouch to archieve this? How can I do one or both of the point to get conditional routing?

This is my routing config with 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;
        }

    }

}

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

You can check in

@CanActivate() and navigate to a different route using router.navigate()
or create a custom <router-outlet> where you do this.

For details see https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492#.f76jyafdn

See also Check if the user logged in on any page change in Angular 2

edited May 23 '17 at 10:31

Community

1
1

answered Apr 21 '16 at 14:13

Günter Zöchbauer

623,577
216
2,003
1,567

What's the best aprouch to take, @CanActivate() or Custom router-outlet? From what I read on the post using @CanActivate() "A serious drawback of this feature for now in version beta.8...To access the DI we need a bit of hack for this to work", but now we are on beta 14, anyway, seems to be easier to create a router-outlet, is this correct? – Diego Unanue Apr 21 '16 at 14:53
DI in `@CanActivate()` still needs the hack. The router is reworked currently and this is one issue that is planned to be fixed. If there are different checks for most routes or routed components I would go for `@CanActivate()` if it's the same check (like `isLoggedIn`) on all (or most) components I would go with the custom ``. – Günter Zöchbauer Apr 21 '16 at 14:57
1

I use the code of the post: activate(instruction: ComponentInstruction) { if (this._canActivate(instruction.urlPath)) { return super.activate(instruction); } this.router.navigate(['Login']); } but when it goes to the else statement and try to navigate to Login it keeps looping in the activate method, causing the app crash. – Diego Unanue Apr 21 '16 at 18:01

score 0 · Answer 2 · answered Apr 21 '16 at 14:28

0

Router definition has loader parameter:

loader : () => Promise<Type>

that allows to determine component type dynamically and async.

answered Apr 21 '16 at 14:28

kemsky

14,727
3
32
51

Conditional routing change default route in Angular 2

2 Answers2