लॉग इन के बाद कोणीय 2 रीडायरेक्ट

Question

मैं इस विचार के साथ कोणीय 2 में एक प्रमाणीकरण प्रणाली बना रहा हूं कि यदि कोई उपयोगकर्ता प्रमाणित नहीं है, तो "संरक्षित" यूआरएल पर नेविगेट करने का प्रयास करता है, तो सिस्टम उपयोगकर्ता को लॉगिन पृष्ठ पर रीडायरेक्ट करेगा "अगली" नामक एक क्वेरी पैरा को यूआरएल करें जो लॉगिन सिस्टम को उपयोगकर्ता को उस स्थान पर रीडायरेक्ट करने में मदद करेगा जहां वह पहले स्थान पर होना चाहता था।

login?next=my-redirect-url

मेरी घटकों की रक्षा के लिए, मैं उन सभी को में डेकोरेटर @CanActivate(isUserAuthenticated) उपयोग कर रहा हूँ। isUserAuthenticated समारोह कुछ इस प्रकार है:

function isUserAuthenticated(
    prevInstr: ComponentInstruction, 
    nextInstr: ComponentInstruction 
): boolean { 
    const authService = injector.get(AuthService); 
    const router = injector.get(Router); 
    if(authService.isLoggedIn()) { 
     return true; 
    } else { 
     router.navigate(["/Login", {next: nextInstr.urlPath}]); 
     return false; 
    } 
} 

यह दृष्टिकोण काम नहीं कर रहा है क्योंकि nextInstr की urlPath संपत्ति "पूर्ण" यूआरएल (यह उदाहरण के लिए क्वेरी पैरामीटर का अभाव है) नहीं दिखा रहा है।

उदाहरण से nextInstr जैसे पूर्ण यूआरएल बनाने का कोई तरीका है?

let url = router.generate(['./Login', {next: nextInstr.urlPath}]).toRootUrl(); 

चलें routeconfig के आधार पर संरचना उदाहरण का पालन करना कहते हैं::

login?next=my-redirect-url 

और फिर आप यूआरएल

router.navigateByUrl('/' + url); 

निम्नलिखित पर नेविगेट करने navigateByUrl का उपयोग

Answer 1

हाँ वहाँ एक रास्ता है मैंने इसे अपने उदाहरण के साथ परीक्षण किया है और परिणाम आप छवि पर देख सकते हैं:

let instruction = router.generate(['./Country', {country: 'de', a: 1, b: 2}]); 
console.log(instruction, instruction.toRootUrl()); 

Answer 2

एक और तरीका है RouterStateSnapshot.url उपयोग करने के लिए मूल अनुरोध किया गया संसाधन के लिए पुनः निर्देशित की इसी आवश्यकता को प्राप्त करने के प्रमाणीकरण है के बाद (/ रूटर 3.0.0 का उपयोग कर @ कोणीय क्वेरी पैरामीटर का उपयोग किए बिना) है, जो एक है स्ट्रिंग जिसमें उपयोगकर्ता द्वारा अनुरोध किए गए संसाधन का यूआरएल शामिल है। CanActivate हुक के अंदर, असफल प्रमाणीकरण प्रयास के बाद उपयोगकर्ता को अपने लॉगिन फॉर्म पर वापस रीडायरेक्ट करने से पहले, RouterStateSnapshot.url से अनुरोधित यूआरएल प्राप्त करें और इसे अपने चरम फ़ंक्शन पर पहुंचने वाले चर में संग्रहीत करें। जब उपयोगकर्ता सफलतापूर्वक लॉग इन करता है तो संग्रहीत यूआरएल पर रीडायरेक्ट करता है।

//GaurdService - implements CanActivate hook for the protected route 

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

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

    canActivate(state: RouterStateSnapshot): boolean { 
     let url: string = state.url; 
     return this.checkLogin(url); 
    } 

    checkLogin(url: string): boolean { 
     if (this.authService.loggedIn()) { return true; } 
     this.authService.redirectUrl = url; // set url in authService here 
     this.router.navigate([ '/login' ]); // then ask user to login 
     return false; 
    } 

} 

मेरे AuthService (नीचे), जो लॉगिन करता है, सफल लॉगिन करके मूल रूप से अनुरोध किया गया संसाधन के लिए उपयोगकर्ता रीडायरेक्ट करेगा: यहाँ मेरी उदाहरण है।

import { Injectable, Inject } from '@angular/core'; 
import { tokenNotExpired } from 'angular2-jwt'; 
import { Router } from '@angular/router'; 
import { Headers, Http, Response, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs'; 
import './../rxjs-operators'; 

const API_URL: string = ''; 

@Injectable() 
export class AuthService { 
    public redirectUrl: string = ''; //Here is where the requested url is stored 

constructor(@Inject('API_URL') private apiURL: string, private router: Router, private http: Http) {} 

    public loggedIn(): boolean { 
     return tokenNotExpired('token'); 
    } 

    public authenticate(username: string, password: string) { 
     let body: string = JSON.stringify({ un: username, pw: password}); 
     let headers: Headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options: RequestOptions = new RequestOptions({ headers: headers }); 
     return this.http.post(this.apiURL + '/authenticate', body, options) 
      .map(res => res.json()) 
      .subscribe(res => { 
       localStorage.setItem('token',res.token); 
       this.redirect(); // Redirect to the stored url after user is logged in 
      }); 

     .catch(this.handleError); 
    } 

    private redirect(): void { 
     this.router.navigate([ this.redirectUrl ]); //use the stored url here 
    } 
} 

इस प्रकार आपका एप्लिकेशन क्वेरी पैरामीटर का उपयोग किए बिना मूल रूप से अनुरोधित संसाधन को याद कर सकता है। https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

आशा इस कोई मदद करता है:

अधिक जानकारी के लिए कृपया "व्यवस्थापक सुविधा गार्ड" खंड पर शुरू angular.io पर उदाहरण मार्गदर्शिका देखें।