2016-08-17 11 views
16

Mam aplikację, którą buduję, która implementuje CanActivate na trasie deski rozdzielczej. Działa dobrze akceptuj przy przeładowaniu strony, sprawdzam flagę w usłudze użytkownika, aby sprawdzić, czy użytkownik jest zalogowany, czy nie. domyślnie ta flaga jest fałszywa, co powoduje, że użytkownik się loguje. Również na stronie reload Próbuję pobrać dane użytkowania z tokena w localStorage, jeśli pobieranie zakończyło się pomyślnie, chcę, aby pozostały na desce rozdzielczej. Problem polega na tym, że widzę login i konieczność ręcznego przekierowania ich do pulpitu nawigacyjnego. Czy istnieje sposób naprawienia tego w miejscu, w którym authGuard nie robi niczego, dopóki nie sprawdzi interfejsu API? Kod jest tutaj: https://github.com/judsonmusic/tflUsługa Angular 2 AuthGuard z przekierowaniem?

App jest tutaj: Train For Life!

Kokpit:

import{ Component , ViewChild} from '@angular/core'; 
import {LoginComponent} from "../login.component"; 
import {UserService} from "../user.service"; 
import {SimpleChartComponent} from "../charts/simpleChart.component"; 
import {AppleChartComponent} from "../charts/appleChart.component"; 
import {BarChartComponent} from "../charts/barChart.component"; 
import {DonutChartComponent} from "../charts/donutChart.component"; 
import {AlertComponent} from 'ng2-bootstrap/ng2-bootstrap'; 
import {ModalDemoComponent} from "../modals/modalDemoComponent"; 
import {NgInitHelperComponent} from "../helpers/nginit.helper.component"; 
import {ModalDirective} from "ng2-bootstrap/ng2-bootstrap"; 
import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap'; 


@Component({ 
    selector: 'dashboard', 
    templateUrl: '/app/components/dashboard/dashboard.component.html', 
    providers: [UserService, BS_VIEW_PROVIDERS], 
    directives: [SimpleChartComponent, AppleChartComponent, BarChartComponent, DonutChartComponent, AlertComponent, ModalDemoComponent, NgInitHelperComponent, ModalDirective] 
}) 
export class DashboardComponent { 

    public areas:any; 

    constructor() { 

    this.areas = [ 

     "Spiritual", 
     "Habits", 
     "Relationships", 
     "Emotional", 
     "Eating Habits", 
     "Relaxation", 
     "Exercise", 
     "Medical", 
     "Financial", 
     "Play", 
     "Work/ Life Balance", 
     "Home Environment", 
     "Intellectual Well-being", 
     "Self Image", 
     "Work Satisfaction" 
    ] 

    } 
} 

Trasy: trasa

logowanie:

import { Routes }   from '@angular/router'; 
import { AuthGuard }  from './components/auth-guard.service'; 
import { AuthService } from './components/auth.service'; 
import { LoginComponent } from './components/login.component'; 
export const loginRoutes: Routes = [ 
    { path: 'login', component: LoginComponent } 
]; 
export const authProviders = [ 
    AuthGuard, 
    AuthService 
]; 

Odpowiedz

39

w AuthGuard Czy ta

@Injectable() 

export class AuthGuard implements CanActivate { 

auth: any = {}; 

constructor(private authService: AuthService, private router: Router) { 

} 

canActivate() { 
    if (/*user is logged in*/) { 
     this.router.navigate(['/dashboard']); 
     return true; 
    } 
    else { 
     this.router.navigate(['/Login']); 
    } 
    return false; 
} 
} 
+1

Zamiast hardcoding „/ desce rozdzielczej” czy istnieje sposób, aby wyciągnąć zamierzonej trasy z routera? – Kirby

4

I rzeczywiście zmienił moje usługi to i to działa:

import { Injectable }    from '@angular/core'; 
import { CanActivate, Router, 
ActivatedRouteSnapshot, 
RouterStateSnapshot } from '@angular/router'; 
import { AuthService }   from './auth.service'; 
import {UserService} from "./user.service"; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private authService: AuthService, private router: Router, private userService: UserService) {} 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 



    if (this.authService.isLoggedIn){ 
     console.log('ATUH GUARD SAYD THEY ARE ALREADY LOGGED IN!'); 
     return true; 


    }else { 


     this.userService.getUser().subscribe((user) => { 

     console.log('AUTH GUARD GETTING USER', user); 

     if (user._id) { 
     this.authService.isLoggedIn = true; 
     // Store the attempted URL for redirecting 
     this.authService.redirectUrl = state.url; 
     this.router.navigate(['/dashboard']); 
     return true; 
     }else{ 
      console.log('Validation Failed.'); 
      localStorage.clear(); 
      this.router.navigate(['/login']); 
      return false; 
     } 


     }, (error) => { 
     console.log('There was an error.'); 
     this.router.navigate(['/login']); 
     return false 

     }); 

    } 


    } 
}