i want load menu options dynamically. i'm wondering best approach
i able use code below add routes after page loaded. works normal navigation, not work during refresh.
can configure router return promise / how load menu items route?
@inject(httpclient) export class documentmenu { router: router; documents : idocument[]; heading = 'document router'; constructor(public http: httpclient) {} activate(): void { this.http.fetch('http://localhost:17853/document/getdocuments?folderid=13244') .then<idocument[]>(response => response.json()) .then<idocument[]>(docs => { if ( docs ){ for( var doc of docs){ this.router.addroute( { route : doc.documentid.tostring(), name : doc.name, moduleid: './documents/document', nav:true, title: doc.name }); } this.router.refreshnavigation(); } return docs; }); } configurerouter(config: routerconfiguration, router: router) { var routes = new array(); routes.push( { route: 'index', name: 'index-name', moduleid: './documents/index', nav: false, title: 'documents' } ); routes.push( { route: '', redirect: 'index' } ); config.map( routes ); this.router = router; } }
this not answer question, think may helpful , others similar issue.
the dynamic route anti-pattern
your application has number of different routes, of vary based on state of application. therefore, must first fetch data, , build routes, , register them router.
the reason anti-pattern because continuously need update router based on state of application, when aurelia built static ways of describing dynamic content.
dynamically routing homogeneous data
let's building google drive, , have number of various files change user adds , removes them. case have 2 categories of routes: folders , documents. therefore, make 1 route each.
configurerouter(config) { config.map([ { route: 'folder/:id', moduleid: 'folder' } { route: 'document/:id', moduleid: 'document' } } } class folderviewmodel { activate({ id }) { // specific folder data , load folder view model this.fetch('getdocuments?folderid=${id}') } } class documentviewmodel { activate({ id }) { // specific document , load document view model this.fetch('getdocuments?documentid=${id}') } } dynamically routing hetergeneous data
let's instead want build youtube. when user mjd10d logs in, welcome watch videos heart's content, not premium content creator, , doesn't have access content creation portion of site. best way handle leave possible routes in application, , filter them based on user's credentials in authorizestep.
configurerouter(config, router) { config.addpipelinestep('authorize', authorizestep); } @inject(usersession) class authorizestep { constructor(usersession) { this.user = usersession; } run(navigationinstruction, next) { var instructions = navigationinstruction.getallinstructions() if (!this.authorized(instructions.config)) { return redirect('404'); } return next(); } authorized(routeconfig) { // smart returns false if unauthorized return this.user.permissionlevel > routeconfig.requiredpermission; } } though not cases authorization related, can register own pipeline step using addpipelinestep api
