एंगुलर 2 का उपयोग करके, लॉगिन रीडायरेक्ट से पहले पिछले यूआरएल पर रीडायरेक्ट कैसे करें

Question

एक पृष्ठ ऐप बनाने के लिए एंगुलर 2 का उपयोग करके, मैं कस्टम RouterOutlet में गैर-सार्वजनिक मार्गों तक अनधिकृत उपयोगकर्ता पहुंच को अवरुद्ध कर रहा हूं और उन्हें लॉगिन दृश्य में रीडायरेक्ट कर रहा हूं। एक सफल लॉगिन के बाद, मैं डिफ़ॉल्ट दृश्य की बजाय उपयोगकर्ता को मूल रूप से अनुरोधित दृश्य पर रीडायरेक्ट करना चाहता हूं।

मैंने देखा है कि Router एक renavigate() समारोह है कि पिछले सफल मार्ग पर जाता है, लेकिन पिछले सफल मार्ग /auth/login और नहीं मूल रूप से अनुरोध किया गया URL था।

मूल रूप से: मैं पहले से अनुरोध किए गए यूआरएल को कैसे एक्सेस या निर्धारित कर सकता हूं?

मैं वास्तव में पास करने वाले क्वेरी स्ट्रिंग पैरामीटर का सहारा लेना नहीं चाहता, जब तक कि मुझे वास्तव में नहीं करना चाहिए। आदर्श रूप से घटक के हिस्से के रूप में के समान history संग्रह तक पहुंच बनाना अच्छा लगेगा!

Answer 1

1. उपयोग प्रमाणीकरण गार्ड्स (औजार CanActivate) अप्रमाणित उपयोगकर्ताओं को रोकने के लिए। उदाहरण के साथ official documentation और this blog देखें।

2. अनुरोधित यूआरएल को कैप्चर करने के लिए ऑथ गार्ड में RouterStateSnapshot का उपयोग करें।

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) 
   { 
       // keep the attempted URL for redirecting 
       this._loginService.redirectUrl = state.url; 
   } 
   

3. (login.component.ts में उदा) Router उपयोग करने के साथ सफल प्रमाणीकरण पर कि URL पर रीडायरेक्ट। जैसे this._router.navigateByUrl(redirectUrl);

पीएस @MichaelOryl और @Vitali के सुझाव काम करेंगे, लेकिन मेरा तरीका Angular2 अंतिम रिलीज के साथ अधिक गठबंधन है।

Answer 2

Location कक्षा के लिए आपको docs में आपको जो चाहिए वह मिल सकता है। back() फ़ंक्शन संभवतः आपके लिए ऐसा कर सकता है।

एक और दृष्टिकोण popstate की घटनाओं को Location में सब्सक्राइब करना होगा, इसके बजाए। MDN has docs उन मूल्यों के बारे में बात कर रहे हैं जिन्हें आप प्राप्त करने की उम्मीद कर सकते हैं।

class MyCLass { 
    constructor(private location: Location) { 
    location.subscribe((val) => { 
     // do something with the state that's passed in 
    }) 
    } 
} 

अन्यथा आप एक ऐसी सेवा चाहते हैं जो राउटर में परिवर्तनों को ट्रैक करे ताकि आप उन्हें एक्सेस कर सकें।

class MyTrackingService { 
    constructor(private router: Router) { 
    router.subscribe((val) => { 
     // store the routes here so that you can peel them off as needed? 
    }) 
    } 
} 

इस मामले में मैं Router वस्तु तक पहुँचने कर रहा हूँ और किसी भी परिवर्तन की सदस्यता ताकि मैं उन्हें ट्रैक कर सकता है।

Answer 3

यह मेरे लिए काम किया। बूटस्ट्रैप विधि में पंजीकृत होने वाले अपने मुख्य ऐप घटक के निर्माता में इसे इंजेक्ट करें। पृष्ठ लोड पर पहला val मूल URL होना चाहिए। मैं कुशल होने के बाद सही सदस्यता ले रहा हूं क्योंकि मैं (शायद, अभी तक) इस सेवा में बाद के राउटर घटनाओं को सुनना नहीं चाहता हूं। अन्य स्थानों में सेवा इंजेक्ट करें जहां मूल यूआरएल की आवश्यकता है।

import { Injectable } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { Subscription } from 'rxjs/Subscription'; 

@Injectable() 
export class UrlTrackingService { 

    public originalUrl: string; 

    constructor(
    private router: Router 
) { 
    let subscription: Subscription = this.router.events.subscribe((val) => { 
     this.originalUrl = val.url; 
     subscription.unsubscribe(); 
    }); 
    } 

} 

Answer 4

कोणीय 2.2 का उपयोग करके अद्यतन उदाहरण।1

प्रमाणीकरण गार्ड कि प्रवेश करने के लिए घटक मूल URL गुजरता है:

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

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private router: Router) { } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     if (localStorage.getItem('currentUser')) { 
      // logged in so return true 
      return true; 
     } 

     // not logged in so redirect to login page with the return url 
     this.router.navigate(['/login', { returnUrl: state.url }]); 
     return false; 
    } 
} 

import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 

import { AlertService, AuthenticationService } from '../_services/index'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'login.component.html' 
}) 

लॉग इन घटक है कि प्रवेश के बाद पिछले/मूल URL पर रीडायरेक्ट:

export class LoginComponent implements OnInit { 
    model: any = {}; 
    loading = false; 
    returnUrl: string; 

    constructor(
     private route: ActivatedRoute, 
     private router: Router, 
     private authenticationService: AuthenticationService, 
     private alertService: AlertService) { } 

    ngOnInit() { 
     // reset login status 
     this.authenticationService.logout(); 

     // get return url from route parameters or default to '/' 
     this.returnUrl = this.route.snapshot.params['returnUrl'] || '/'; 
    } 

    login() { 
     this.loading = true; 
     this.authenticationService.login(this.model.username, this.model.password) 
      .subscribe(
       data => { 
        // login successful so redirect to return url 
        this.router.navigate([this.returnUrl]); 
       }, 
       error => { 
        // login failed so display error 
        this.alertService.error(error); 
        this.loading = false; 
       }); 
    } 
} 

अधिक जानकारी और काम कर डेमो आप के लिए this post