Angular2: रोकें विशिष्ट मार्गों

Question

मैं अपने main.ts फाइल में कुछ routes परिभाषित किया है तक पहुँचने से उपयोगकर्ताओं को प्रमाणीकृत:

const routes: RouterConfig = [ 
    { path: '', component: HomeComponent }, 
    { path: '', redirectTo: 'home', terminal: true }, 
    { path: 'dashboard', component: DashboardComponent, canActivate: [LoggedInGuard] }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'about', component: AboutComponent } 
]; 

सफल प्रवेश के बाद मैं अपने प्रमाणीकृत उपयोगकर्ताओं को विशिष्ट मार्गों (जैसे dashboard) का उपयोग करने में सक्षम हो सकते हैं। और प्रवेश के बिना वे dashboard उपयोग कर सकते हैं नहीं है, लेकिन वे यात्रा करने के लिए के बारे में, घर में सक्षम हो सकता है, के लिए लॉग इन

मैं प्रबंधित किया है उन, लॉगिन dashboard बिना traversing CanActivate का उपयोग कर प्रतिबंधित करने के लिए।

canActivate(): boolean { 
    if (this.authService.isLoggedIn()) { 
     return true; 
    } 
    this.router.navigateByUrl('/login'); 
    return false; 
    } 

लेकिन उन मार्गों और सफल प्रवेश के बाद CanActivate दृष्टिकोण का उपयोग करना, उपयोगकर्ताओं को भी गोटो मार्गों करने में सक्षम login की तरह, कर रहे हैं home। मैं इसे कैसे रोक सकता हूं?

एनबी। मैं कोणीय 2 आरसी 4 का उपयोग कर रहा हूँ।

Answer 1

मैंने कुछ शोध किए हैं कि यह देखने के लिए कि क्या एक गार्ड को "नकारात्मक" करना संभव है, लेकिन ऐसा लगता है कि आपको अपने गार्ड के विपरीत एक और गार्ड बनाना है। पसंद:

import { Injectable } from '@angular/core'; 
import { CanActivate } from '@angular/router'; 
import { AuthService } from './your-auth.service'; 

@Injectable() 
export class PreventLoggedInAccess implements CanActivate { 

    constructor(private authService: AuthService) {} 

    canActivate() { 
    return !this.authService.isLoggedIn(); 
    } 
} 

इसे अपने बूटस्ट्रैप फ़ंक्शन में भी जोड़ें और आप सभी सेट हैं। तुम बस अपने मार्गों में क्या करना है:

{ path: 'login', component: LoginComponent, canActivate: [PreventLoggedInAccess] }, 

Answer 2

आप इस प्रकार का गार्ड लिख सकते हैं:

import { Injectable } from '@angular/core'; 
import { 
    ActivatedRouteSnapshot, 
    CanActivate, 
    RouterStateSnapshot 
} from '@angular/router'; 

import { AuthService } from './your-auth.service'; 

@Injectable() 
export class UserAccessGuard implements CanActivate { 
    constructor(private authService: AuthService) { 
    } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
     return route.data['onlyGuests'] != authService.isAuthenticated(); 
    } 
} 

और फिर अपने मार्ग परिभाषा में उपयोग:

const routes: Routes = [ 
    { path: '', redirectTo: 'home' }, 

    // accessible only to guests 
    { 
     path: '', 
     component: HomeComponent, 
     data: { onlyGuests: true }, 
     canActivate: [ UserAccessGuard ] 
    }, 
    { 
     path: 'login', 
     component: LoginComponent, 
     data: { onlyGuests: true }, 
     canActivate: [ UserAccessGuard ] 
    }, 

    // accessible only to authenticated users 
    { 
     path: 'dashboard', 
     component: DashboardComponent, 
     canActivate: [ UserAccessGuard ] 
    } 
];