कोणीय 2 - समय-समय पर समाप्त प्रमाणीकरण टोकन को कैसे संभालें?

Question

मैं कोणीय 2.1.2 का उपयोग कर रहा हूँ।

मेरे पास प्रमाणीकरण टोकन है (कोणीय 2-jwt का उपयोग करके) और यदि यह मेरी वेब एपीआई कॉल की अवधि समाप्त हो जाती है तो 401 त्रुटि के साथ विफल हो जाती है। मैं ऐसे समाधान की तलाश में हूं जहां उपयोगकर्ता कोई इनपुट डेटा नहीं खोएगा।

मैं इस 401 को पकड़ सकता हूं और लॉगिन के साथ एक मोडल खोल सकता हूं। उपयोगकर्ता तब लॉग इन करता है, मोडल चला जाता है, और वे अपनी इनपुट स्क्रीन देखते हैं। हालांकि, असफल अनुरोध त्रुटियां दिखा रहे हैं इसलिए मुझे अनुरोधों को पुन: संसाधित करने की आवश्यकता है। यदि यह राउटर नेविगेट किया गया था तो आरंभिक डेटा लोड नहीं हुआ है।

मैं पृष्ठ को फिर से लोड कर सकता हूं, लेकिन अगर मैं उसी पृष्ठ पर राउटर करता हूं तो यह वास्तव में पृष्ठ को पुनः लोड नहीं करता है। मैं एकल पेज एप पर एक पूर्ण पृष्ठ रीलोड नहीं करना चाहता हूं। क्या राउटर को मजबूर करने का कोई तरीका है। चलाने के लिए नेविगेट करें, भले ही यह वर्तमान पृष्ठ हो?

पुन: नेविगेटिंग अभी भी एक समस्या है क्योंकि मैं कोई नया इनपुट डेटा खो देता हूं जो सहेजा नहीं गया है।

आदर्श रूप से, अनुरोध तब तक 'रोकें' जब तक कि उपयोगकर्ता मोडल से लॉग इन नहीं करता। मुझे इसे लागू करने का कोई तरीका नहीं मिला है।

कोई विचार? क्या कोई सर्वोत्तम अभ्यास है? डेटा JSON स्ट्रिंग के रूप

https://developer.mozilla.org/de/docs/Web/API/Window/sessionStorage

स्टोर और फिर प्रपत्र डेटा को पुन: यदि अनुरोध विफल रहता है:

Answer 1

किसी ब्राउज़र सत्र का उपयोग करें।

Answer 2

ठीक है, पुन: लोड सरल है: (<any>window).location.reload(true);

यह अच्छा विचार लॉगिन/पासवर्ड पॉपअप दिखाने के लिए और उपयोगकर्ता अगर वह, पासवर्ड प्रदान कर सकते हैं रद्द कर देते हैं प्रयोक्ता सिर्फ प्रवेश पृष्ठ पर पुनर्निर्देशित करते काम जारी रखने की अनुमति है।

कनेक्शन समस्याएं, टाइमआउट, सर्वर त्रुटियां भी हैं। समस्या यह है कि कोणीय 2 Http मॉड्यूल और rxjs का उपयोग करके उचित हैंडलिंग को विश्वसनीय रूप से लागू करना मुश्किल है। व्यक्तिगत रूप से, मैंने Http मॉड्यूल का उपयोग करके छोड़ दिया, क्योंकि इसकी त्रुटि प्रबंधन में खराब डिज़ाइन है और मैंने अपना स्वयं का http मॉड्यूल लागू किया है, जो कॉन्फ़िगर करने योग्य त्रुटि हैंडलिंग और पारदर्शी रीट्रीज़ को अनुमति देता है।

Answer 3

आदर्श रूप से, अनुरोध तब तक 'रोकें' जब तक कि उपयोगकर्ता मोडल से लॉग इन नहीं करता। मुझे इसे लागू करने का कोई तरीका नहीं मिला है।

आप इस उदाहरण की तरह tokenNotExpired विशेषता का उपयोग करके अपने बटन स्विच करने का प्रयास किया: https://github.com/auth0/angular2-jwt#checking-authentication-to-hideshow-elements-and-handle-routing

यह आप को रोकने के लिए अनुमति देता है 401 ...

Answer 4

बाद मैं एक लॉगिन करते हैं और एक टोकन प्राप्त (कि मेरे मामले में 60 मिनट में समाप्त हो जाता है), मैंने एक अंतराल निर्धारित किया है जो यह देखने के लिए हर मिनट जांचता है कि 59 मिनट बीत चुके हैं या नहीं। यदि हां, तो मैं एक लॉगिन संवाद खोलता हूं।

विचार, हालांकि, लॉगिन संवाद एक मार्ग नहीं है, लेकिन केवल एक ओवरले जो उपयोगकर्ता द्वारा होने वाली किसी भी स्क्रीन के शीर्ष पर खुलता है (इस प्रकार मैं ऐप रूट के HTML में लॉगिन घटक डालता हूं घटक, और ऐप में कहीं से भी लॉगिन संवाद को कॉल करने के लिए एक अवलोकन योग्य का उपयोग करें)।

जब उपयोगकर्ता सही ढंग से फिर से लॉग इन करता है, तो मैं लॉगिन संवाद बंद करता हूं और उपयोगकर्ता फिर से लॉगिन करने से पहले जो भी स्क्रीन उपयोग कर रहा था उसके साथ अपने रास्ते पर आसानी से चला जाता है।

मुझे नहीं पता कि यह "सर्वोत्तम अभ्यास" है, लेकिन यह उस स्थिति में काम करता है जिसका आप वर्णन कर रहे हैं। मुझे बताएं और मैं कोड डाल सकता हूं।

Answer 5

आमतौर पर मैं सीधे Http का उपयोग करने के बजाय HttpService प्रदान करता हूं। तो आपकी आवश्यकता के साथ, मैं किसी भी वास्तविक HTTP अनुरोध भेजने से पहले प्रमाणीकरण को चेन करने के लिए अपना खुद का get() विधि प्रदान कर सकता हूं।

@Injectable() 
class HttpService { 
    constructor(private http: Http, private auth: Authentication) {} 

    public get(url: string): Observable<Response> { 
    return this.auth.authenticate().flatMap(authenticated => { 
     if (authenticated) { 
     return this.http.get(url); 
     } 
     else { 
     return Observable.throw('Unable to re-authenticate'); 
     } 
    }); 
    } 
} 

यहाँ घटक सेवा को कॉल करने के लिए है:

यहाँ सेवा है

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1> 
    <button (click)="doSomething()">Do Something</button> 

    <div [hidden]="!auth.showModal"> 
    <p>Do you confirm to log in?</p> 
    <button (click)="yes()">Yes</button><button (click)="no()">No</button> 
    </div> 
    `, 
}) 
export class AppComponent { 
    name = 'Angular'; 

    constructor(private httpSvc: HttpService, public auth: Authentication) {} 

    ngOnInit() { 
    } 

    doSomething() { 
    let a = this.httpSvc.get('hello.json').subscribe(() => { 
     alert('Data retrieved!'); 
    }, err => { 
     alert(err); 
    }); 
    } 

    yes() { 
    this.auth.confirm.emit(true); 
    } 

    no() { 
    this.auth.confirm.emit(false); 
    } 
} 

observables चेनिंग रखकर Authentication सेवा निर्धारित करता है कि मॉडल को दिखाने के लिए सामान्य प्रवाह बाधित करने के लिए (हालांकि वर्तमान में केवल ऐप घटक के साथ रहता है, यह निश्चित रूप से अलग से लागू किया जा सकता है)। और एक बार संवाद से सकारात्मक जवाब प्राप्त हो जाने पर, सेवा प्रवाह को फिर से शुरू कर सकती है।

class Authentication { 
    public needsAuthentication = true; 
    public showModal = false; 
    public confirm = new EventEmitter<boolean>(); 

    public authenticate(): Observable<boolean> { 
    // do something to make sure authentication token works correctly 
    if (this.needsAuthentication) { 
     this.showModal = true; 
     return Observable.create(observer => { 
     this.confirm.subscribe(r => { 
      this.showModal = false; 
      this.needsAuthentication = !r; 
      observer.next(r); 
      observer.complete(); 
     }); 
     }); 
    } 
    else { 
     return Observable.of(true); 
    } 
    } 
} 

मेरे यहां एक पूर्ण लाइव उदाहरण है।

http://plnkr.co/edit/C129guNJvri5hbGZGsHp?open=app%2Fapp.component.ts&p=preview