聚合物SPA的登录页面

Question

我是聚合物的新手，并且为我的所有应用程序使用了聚合物 2.0 初学者工具包模板。我的大多数应用程序都非常相似 - 一个登录页面，根据用户角色(通常是管理员或用户(将您重定向到不同的门户。门户有一个app-drawer，通过iron-pages设置了不同的视图。

我当前的流程在每个"门户"中复制my-app模板。我只是不确定这是否是正确的方法。我会进一步解释。

使用带有铁页的入门套件中的my-app来加载login-view、admin-portal和用户门户，默认为login-view。

用户登录后，应用程序将根据登录的用户加载admin-portal或user-portal。

admin-portal和user-portal的结构都与 my-app 非常相似，具有特定于管理功能或用户功能的app-drawer，然后iron-pages加载视图。我主要想知道这是否是最佳实践 - 因为你总是有一个嵌套的iron-pages.有没有抽象login-view？

法典：

我的应用- 开箱即用的模板

<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);
}

管理门户- 同样，与开箱即用模板基本相同

<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);
}

Answer 1

这个实现似乎没有什么特别的错误，而且看起来很简单。具有自己的视图的登录名也可以。有与之关联的可显示的 DOM("请登录"、用户名、密码框(，因此将其作为具有身份验证知识的可选视图并没有错。

只要确保登录页面不是有意义操作的看门人，即用户不能仅仅通过在检查器中更改页面来添加/删除Firestore中的数据。iron-pages！== 安全性，只有导航。

此外，嵌套iron-pages并不违反最佳实践。iron-pages本质上是一个光荣的element.setAttribute('hidden', '')和element.removeAttribute('hidden').不过，嵌套iron-pages的一个常见问题是在父iron-pages中导航时跟踪退出状态。例如，登录转到管理员，然后在"管理"中导航到"重新计划"，然后以其他管理员身份登录，管理门户可能不应该自动处于"重新计划"状态。