Angular 2路由器无法正常工作

Question

i am trying to achieve following :

• User logins then get redirected to site component(First default page after login) and i store the user configuration ie which all components user can access, in Local Storage or session storage.

• If user tries to access the /site component directly without logging in , then user should be redirected to login page.

Problem :Above functionality is working very well but : If i try to access /site as first page then angular router redirects me to /login but after logging in , it is not redirecting me to site again.I am expecting that after login it should redirect me to site component again .

Steps involved:

1. Open new Tab/Window (so that we dont have any configuration in Local or session storage).

2. Try to access /site, you should automatically be redirected to /login component.

3. After /login it should again redirect to /site (Its not working).

Login Component:

@Component({
    selector: 'login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})

@NgModule({
providers:[AuthenticationService]
})
export class LoginComponent implements OnInit {
    public user: User;
    public isUserAuthenticated = false;
    // For testing we are going to use Dummy Configuration.
    // Actual data will come from Rest Service


    private dummyConfiguration:Object={
        "user":"dummy",
        "component":[{
                  "name":"CustomerComponent",
                  "access":"ENABLED"
        },
        {
              "name":"InvoicingComponent",
                  "access":"HIDDEN"

        }

        ]
    };

    constructor(private router: Router,private authenticationService : AuthenticationService) {
        this.user = new User();
    }

    login() {
        this.isUserAuthenticated = true;
        this.authenticationService.saveInSession(this.dummyConfiguration);
        this.router.navigate(['/site', {}]);
    }

    ngOnInit() {
    }
}

export class User {
    public email: string;
    public password: string;
}

SiteComponent

@Component({
  selector: 'site',
  templateUrl: './site.component.html',
  styleUrls: ['./site.component.css']
})
export class SiteComponent extends SuperParentComponent{
  constructor(private router: Router, private authenticationService: AuthenticationService) { 
    super();
    this.validateSession(router,authenticationService);
  }
}

SuperParentComponent

export class SuperParentComponent {

constructor(){    
}
    validateSession( router: Router,  authenticationService: AuthenticationService) {
        if (!authenticationService.isUserLoggedIn()) {
            router.navigate(['/login', {}]);
        }
    }
}

AuthenticationService:ts

export class AuthenticationService {


        @SessionStorage() public userConfiguration: Object;

        isAuthentic(component: string):boolean {
            if (this.isComponentAllowed(component)){
                return true;
            }
        }

        public getUserConfiguration():Object {
            return this.userConfiguration;
        }

        saveInSession(data: Object) {
            this.userConfiguration = data;
        }

        isUserLoggedIn():boolean{
            if(this.userConfiguration==null){
                return false;
            }
            return true;
        }

        isComponentAllowed(component:string){
           var result:Array<Object>;
           if(this.userConfiguration=={}){
               return false;
           }
           if(this.userConfiguration.hasOwnProperty("component")){
               result=this.userConfiguration["component"];
               for (var i = 0; i < result.length; i++) {
                   var currentComponent:Object=result[i];
                if (currentComponent["name"] ==component && currentComponent["access"]== AccessType.ENABLED) {
                     return true;
                }
           }
        }
        return false;


    }

    }

     enum AccessType {
         ENABLED=<any>"ENABLED",
         HIDDEN=<any>"HIDDEN"


     }

This user configuration is just for authorization , if user can access the given component or not. I will get it from Server.

Here is my full code : https://github.com/tsingh38/Angular2.git

UPDATE

As suggested answer, i have adapted the code :

Site component consists of subcomponents GeneralComponent and which consists of Customer Component and Invoice Component.

They are not shown if site is redirected after login.

Site .html

<div style="width: 100%;">
   <div style="float:left; width: 20%">
       <navigation></navigation>
   </div>
   <div style="float:right;">
       <general></general>
   </div>
</div>
<div style="clear:both"></div>

General.Component.html

<div style="border:1px solid black;">
    <customer></customer></div>
<div style="border:1px solid blue;float:bottom">
<invoice></invoice>
</div>

Customer.html

<div *ngIf="allowed">This is customer data</div>
<div *ngIf!="allowed"></div>

Invoice.html

<div *ngIf="allowed">This is invoice data</div>
<div *ngIf!="allowed"></div>

Customer Component

@Component({
  selector: 'customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css'],
  providers:[AuthenticationService]
})
export class CustomerComponent extends SuperChildComponent{
  private authenticationService:AuthenticationService;
  constructor(authenticationService : AuthenticationService) {
    super(authenticationService);
    this.authenticationService=authenticationService;
     this.isAllowed(this.constructor.name);
  }



}

SuperChildComponent

export class SuperChildComponent {
    public allowed: boolean = false;
    private superAuthenticationService:AuthenticationService;


    constructor(authenticationService: AuthenticationService) {
        this.superAuthenticationService = authenticationService;
    }

    isAllowed(component: string) {
        this.allowed = this.superAuthenticationService.isAuthentic(component);
    }

}

Thanks.

Answer 1

I am doing it a similar way. I just use

this.router.navigate(['/site']);

That is working for me.

So change your

this.router.navigate(['/site', {}]);

in LoginComponent to the above and it should work as expected.