लॉगिन पृष्ठ और ऐप के बीच ऑरेलिया

Question

के साथ स्विच कैसे करें मैं अपने प्रोजेक्ट के लिए ऑरेलिया कंकाल का उपयोग कर रहा हूं। सबकुछ इतना सहज महसूस कर रहा था, हालांकि मैं एक ऐसी समस्या से फंस गया हूं जो मुझे संदेह है कि काफी आसान है (यदि आप जानते हैं)।

समस्या यह है कि app.html/app.js प्रारंभ में एक नौसेना बार दिखा रहा है और कुछ डिफ़ॉल्ट शैलियों को लोड कर रहा है।

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

app.js

<template> 
    <div if.bind="auth.isNotAuthenticated()"> 
     <require from="components/login/index" ></require> 
     <login router.bind="router"></login> 
    </div> 
    <div if.bind="auth.isAuthenticated()"> 
     <require from="nav-bar.html" ></require> 
     <require from="../styles/styles.css"></require> 
     <div class="container" id="banner"> 
      <div class="row"> 
       <img src="images/logo.png" /> 
      </div> 
     </div> 
     <nav-bar router.bind="router"></nav-bar> 
     <div class="page-host"> 
      <router-view></router-view> 
     </div> 
    </div> 
</template> 

जाहिर है कि काम नहीं करता है (जब तक आप पृष्ठ/F5 ताज़ा करें), app.js के बाद से/एप्लिकेशन:

तो मैं कुछ इस तरह की कोशिश की .html रूट रूट है जो हमेशा मौजूद होता है और कभी भी नहीं बदलता है। लेकिन मुझे आशा है कि मार्कअप के भीतर तर्क यह बताएगा कि मैं क्या हल करना चाहता हूं?

मुझे लगता है कि अगर मैं लॉगिन मार्ग से, किसी अन्य मार्ग पर लॉगिन मार्ग से नेविगेट करता हूं तो मैं केवल माता-पिता मार्ग (app.js) को फिर से लोड करने का तरीका जानता हूं। और फिर जब मैं लॉगआउट करता हूं, तो मूल मार्ग (app.js) को एक बार फिर से ताज़ा किया जाना चाहिए। तब मेरी सभी समस्याओं का हल हो जाएगा।

मुझे यहां क्या याद आ रही है? :-)

Answer 1

मुझे लगता है कि ऑरेलिया setRoot(module) फ़ंक्शन इससे मदद करेगा।

यहां मानक main.js फ़ाइल है कि "बूटस्ट्रैप" Aurelia एप्लिकेशन:

main.js

export function configure(aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .developmentLogging(); 

    aurelia.start() 
    .then(a => a.setRoot()); // this is the equivalent of setRoot('app') 
} 

setRoot कोई तर्क Aurelia एक app.js + अनुप्रयोग के लिए लग रहा है के साथ कहा जाता है जब। एचटीएमएल व्यूमोडेल और देखें।

main.js

export function configure(aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .developmentLogging(); 

    aurelia.start() 
    .then(a => { 
     if (userIsLoggedIn()) { 
     a.setRoot('app'); 
     } else { 
     a.setRoot('login'); 
     } 
    }); 
} 

फिर अपनी प्रवेश दृश्य मॉडल आप कर सकते हैं में

:

हम जाँच करने के लिए उपयोगकर्ता में और नहीं करता है, तो लॉग इन किया है या नहीं, लॉगिन स्क्रीन दिखाने के तर्क समायोजित कर सकते हैं setRoot('app') फोन के बाद उपयोगकर्ता द्वारा सफलतापूर्वक प्रवेश किया है:

login.js

import {Aurelia, inject} from 'aurelia-framework'; 
import {AuthService} from './my-auth-service'; 

@inject(Aurelia, AuthService) 
export class Login { 
    userName = ''; 
    password = ''; 

    constructor(aurelia, authService) { 
    this.aurelia = aurelia; 
    this.authService = authService; 
    } 

    submit() { 
    // attempt to login and if successful, launch the app view model. 
    this.authService.login(userName, password) 
     .then(() => this.aurelia.setRoot('app')); 
    } 
} 

नोट: यदि आपका ऐप्स "logout" विशेषता यह है कि उपयोगकर्ता लॉगिन स्क्रीन (जैसे setRoot('login')) के लिए वापस भेज देंगे भी शामिल है, reset the router के लिए सुनिश्चित हो और उसी के अनुसार URL अपडेट करें। यह उपयोगकर्ता को वापस साइन इन करते समय समस्याओं को रोक देगा। here और here में अधिक जानकारी।

Answer 2

setRoot की एक काम उदाहरण के लिए आप भी अद्भुत जवाब के लिए https://foursails.github.io/sentry https://github.com/foursails/sentry