我是 Polymer 的新手,我的所有应用程序都使用了 Polymer 2.0 Starter Kit 模板。我的大多数应用程序都非常相似——登录页面根据用户角色(通常是管理员或用户)将您重定向到不同的门户。门户具有app-drawer
不同的视图设置,通过iron-pages
.
我当前的流程复制了my-app
每个“门户”中的模板。我只是不确定这是否是正确的方法。我会进一步解释。
使用my-app
带有 iron-pages 的入门工具包中的原样加载login-view
、admin-portal
和用户门户,默认为login-view
.
用户登录后,应用程序将加载admin-portal
或user-portal
取决于哪个用户已登录。
两者admin-portal
都user-portal
具有与 my-app 非常相似的结构,具有app-drawer
然后iron-pages
加载特定于管理功能或用户功能的视图。我主要想知道这是否是最佳实践——因为你总是有一个嵌套的iron-pages
. 有没有抽象的login-view
?
代码:
my-app - 开箱即用的模板
<app-location
route="{{route}}"
url-space-regex="^[[rootPath]]">
</app-location>
<app-route
route="{{route}}"
pattern="[[rootPath]]:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<login-view name="login" current-user="{{currentUser}}"></login-view>
<superuser-portal name="superuser"></superuser-portal>
<admin-portal name="admin" current-user="{{currentUser}}"></admin-portal>
<doctor-portal name="doctor" current-user="{{currentUser}}"></doctor-portal>
<my-view404 name="view404"></my-view404>
</iron-pages>
_routePageChanged(page) {
//console.log(this.user.email);
// If no page was found in the route data, page will be an empty string.
// Default to 'view1' in that case.
this.page = page || 'login';
}
_pageChanged(page) {
console.log('_pageChanged: ' + page);
let resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
if(page === 'login') {
resolvedPageUrl = this.resolveUrl('login-view.html');
} else if(page === 'superuser') {
resolvedPageUrl = this.resolveUrl('superuser-portal.html');
} else if(page === 'admin') {
resolvedPageUrl = this.resolveUrl('admin-portal.html');
} else if(page === 'doctor') {
resolvedPageUrl = this.resolveUrl('doctor-portal.html');
}
console.log('resolvedPageUrl: ' + resolvedPageUrl);
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true);
}
admin-portal - 同样,与开箱即用模板基本相同
<app-route route="{{route}}" pattern="/admin/:page" data="{{routeData}}" tail="{{subroute}}">
</app-route>
<!-- <firebase-auth id="auth" user="{{user}}" on-error="handleError"></firebase-auth> -->
<app-drawer-layout fullbleed narrow="{{narrow}}">
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
<div class="drawerHeader">
<div class="drawerTitle">GetonHealth</div>
<div class="drawerSubtitle">[[displayName]]</div>
</div>
<div style="margin-top: 24px; color: white;">
<vaadin-list-box>
<iron-selector attr-for-selected="name" selected="{{routeData.page}}">
<vaadin-item name="calendar">
<iron-icon icon="vaadin:calendar"></iron-icon>
Calendar
</vaadin-item>
<vaadin-item name="doctors">
<iron-icon icon="vaadin:specialist"></iron-icon>
Manage Doctors
</vaadin-item>
<vaadin-item name="view3">
<iron-icon icon="vaadin:cog-o"></iron-icon>
Settings
</vaadin-item>
<vaadin-item name="view4">
<iron-icon icon="vaadin:info-circle-o"></iron-icon>
Help
</vaadin-item>
<vaadin-item name="logout">
<iron-icon icon="vaadin:exit-o"></iron-icon>
Sign Out
</vaadin-item>
</iron-selector>
</vaadin-list-box>
</div>
</app-drawer>
<app-header-layout>
<app-header>
<app-toolbar effects="waterfall">
<paper-icon-button icon="my-icons:menu" drawer-toggle=""></paper-icon-button>
<div class="main-title" main-title>[[pageTitle]]</div>
</app-toolbar>
</app-header>
<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404" role="main">
<admin-dashboard name="dashboard"></admin-dashboard>
<admin-manage-doctors name="doctors"></admin-manage-doctors>
<manage-doctor-detail name="doctor" page-title="{{pageTitle}}"></manage-doctor-detail>
<admin-calendar-view name="calendar" narrow="[[narrow]]"></admin-calendar-view>
<admin-new-event name="newevent"></admin-new-event>
<admin-event-detail name="event" page-title="{{pageTitle}}"></admin-event-detail>
<admin-reschedule-view name="reschedule" page-title="{{pageTitle}}"></admin-reschedule-view>
<admin-new-appointment name="newappointment" current-user="{{currentUser}}"></admin-new-appointment>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
class AdminPortal extends Polymer.Element {
static get is() { return 'admin-portal'; }
static get properties() {
return {
pageTitle: String,
displayName: String,
currentUser: {
type: Object,
value: {}
},
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
},
routeData: Object,
subroute: Object,
};
}
static get observers() {
return [
'_routePageChanged(routeData.page)',
];
}
_routePageChanged(page) {
// If no page was found in the route data, page will be an empty string.
// Default to 'view1' in that case.
this.page = page || 'calendar';
}
_pageChanged(page) {
console.log('_pageChanged: ' + page);
let resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
if (page === 'dashboard') {
this.set('pageTitle', 'Dashboard');
resolvedPageUrl = this.resolveUrl('admin/views/admin-dashboard.html');
} else if (page === 'doctors') {
this.set('pageTitle', 'Manage doctors');
resolvedPageUrl = this.resolveUrl('admin/views/admin-manage-doctors.html');
} else if (page === 'doctor') {
this.set('pageTitle', '');
resolvedPageUrl = this.resolveUrl('admin/views/manage-doctor-detail.html');
} else if (page === 'calendar') {
this.set('pageTitle', 'Calendar');
this.set('queryParams', {});
resolvedPageUrl = this.resolveUrl('admin/views/admin-calendar-view.html');
} else if (page === 'newevent') {
this.set('pageTitle', 'Create new event');
resolvedPageUrl = this.resolveUrl('admin/views/admin-new-event.html');
} else if (page === 'event') {
resolvedPageUrl = this.resolveUrl('admin/views/admin-event-detail-test.html');
} else if (page === 'newappointment') {
resolvedPageUrl = this.resolveUrl('admin/views/admin-new-appointment.html');
} else if (page === 'reschedule') {
resolvedPageUrl = this.resolveUrl('admin/views/admin-reschedule-view.html');
} else if (page === 'logout') {
this.logout();
return;
}
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true);
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
}
登录视图
performLogin() {
this.$.auth.signInWithEmailAndPassword(this.username, this.password)
.then(response => {
this.username = '';
this.password = '';
this.getUserFromFirestore(response);
}).catch(error => {
console.error(error);
this.$.inputPassword.invalid = true;
this.$.inputPassword.errorMessage = error.message;
this.$.inputPassword.validate();
});
}
getUserFromFirestore(user) {
firestore.collection('users').doc(user.uid)
.get()
.then(doc => {
console.log(doc.data());
//this.set('currentUser', this.docToObject(doc));
this.changePage(user.uid, doc.data().role);
})
.catch(error => {
console.error(error);
});
}
changePage(uid, role) {
let page = '';
if (role === 'superuser') {
page = '/superuser/dashboard';
} else if (role === 'admin') {
page = '/admin/calendar';
} else if (role === 'doctor') {
page = '/doctor/clinics';
}
setTimeout(() => {
window.history.pushState({}, null, page);
window.dispatchEvent(new CustomEvent('location-changed'));
}, 1000);
}