Chuyển hướng đến một thành phần khác bên trong @CanActivate trong Angular2

Question

Có cách nào chúng ta có thể chuyển hướng đến một thành phần khác từ @CanActivate trong Angular2 không?

Answer 1

Có, bạn có thể! Làm như vậy sẽ ngăn không cho thành phần của bạn khởi tạo không có gì.

Đầu tiên, tạo một tập tin mới src/app-injector.ts

let appInjectorRef; 

export const appInjector:any = (injector = false) => { 
    if (!injector) { 
     return appInjectorRef; 
    } 

    appInjectorRef = injector; 

    return appInjectorRef; 
}; 

Sau đó, có được tham khảo từ bootstrap

// ... 
import {appInjector} from './app-injector'; 
// ... 


bootstrap(App, [ 
    ROUTER_PROVIDERS 
]).then((appRef) => appInjector(appRef.injector)); 

Cuối cùng trong chức năng của bạn

// ... 
import {appInjector} from './app-injector'; 
// ... 

@CanActivate((next, prev) => { 
    let injector = appInjector(); 
    let router = injector.get(Router); 

    if (42 != 4 + 2) { 
    router.navigate(['You', 'Shall', 'Not', 'Pass']); 
    return false; 
    } 

    return true; 
}) 

Et voilà!

Nó được thảo luận ở đây https://github.com/angular/angular/issues/4112

Bạn có thể tìm thấy một ví dụ hoàn chỉnh ở đây http://plnkr.co/edit/siMNH53PCuvUBRLk6suc?p=preview bởi @brandonroberts

Answer 2

Tính đến hôm nay, với mới nhất @ góc/router 3.0.0-rc.1, đây là một vài tài liệu tham khảo về cách để làm điều đó thông qua CanActivate lính gác trên các tuyến đường:

1. angular 2 reference
2. Hai câu trả lời cho SO câu hỏi này, bởi Nilz11 và bởi Jason

Các ý chính của logic hình như:

// ... 
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    if (this.authService.isLoggedIn) { 
    // all ok, proceed navigation to routed component 
    return true; 
    } 
    else { 
    // start a new navigation to redirect to login page 
    this.router.navigate(['/login']); 
    // abort current navigation 
    return false; 
    } 
} 

Answer 3

góc 2.0 giải pháp cuối cùng:

bảo vệ của bạn có thể dễ dàng chỉ là một tiêm mà, như vậy, có thể bao gồm thuốc chích riêng. Vì vậy, chúng tôi có thể chỉ cần tiêm bộ định tuyến, để chuyển hướng. Đừng quên thêm dịch vụ làm nhà cung cấp trong mô-đun ứng dụng của bạn.

@Injectable() 
export class AuthGuard implements CanActivate { 

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { 
    if (!authService.isAuthenticated()) { 
     this.router.navigate(['/login']); 
     return false; 
    } 
    return true; 
    } 
} 

export const ROUTES: Routes = [ 
    {path: 'login', component: LoginComponent}, 
    {path: 'protected', loadChildren: 'DashboardComponent', canActivate: [AuthGuard]} 
]; 

Answer 4

Điều này có thể giúp ai đó đang cố gắng chờ đợi điều gì đó trước khi tiếp tục.

waitForBonusToLoad(): Observable<[boolean, string]> { 

const userClassBonusLoaded$ = this.store.select(fromRoot.getUserClasssBonusLoaded); 
const userClassSelected$ = this.store.select(fromRoot.getClassAttendancesSelectedId); 

return userClassBonusLoaded$.withLatestFrom(userClassSelected$) 
    .do(([val, val2]) => { 
    if (val === null && val2 !== null) { 
     this.store.dispatch(new userClassBonus.LoadAction(val2)); 
    } 
    }) 
    .filter(([val, val2]) => { 
    if(val === null && val2 === null) return true; 
    else return val; 
    }) 
    .map(val => { 
    return val; 
    }) 
    .take(1); 
} 

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { 
return this.waitForBonusToLoad().map(([val, val2]) => 
    { 
    if(val === null && val2 === null){ 
     this.router.navigate(['/portal/user-bio']); 
     return false; 
    } 
    else { 
     return true; 
    } 
    } 
) 
}