routing - Polymer SPA 的登录页面
问题描述
我是 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);
}
解决方案
这个实现似乎没有什么特别的错误，而且看起来很简单。有自己的视图的登录也很好。有与之关联的可显示 DOM（“请登录”、用户名、密码框），因此将其作为具有身份验证知识的可选视图没有任何问题。
只要确保登录页面不是有意义的操作的看门人。即用户不能简单地通过更改检查器中的页面来添加/删除firestore中的数据。iron-pages!== 安全，只有导航。
此外，嵌套iron-pages. iron-pages本质上是一个美化的element.setAttribute('hidden', '')和element.removeAttribute('hidden')。不过，嵌套的一个常见问题iron-pages是在 parent 中导航时跟踪退出状态iron-pages。例如，登录进入管理员，然后在管理员中导航到重新安排，然后您以不同的管理员身份登录，管理员门户可能不应该自动重新安排。
推荐阅读
- c++ - Automake 复用常用文件
- php - 无法读取 CURL 保存的 cookie 文件
- android - 为什么我需要在 Kotlin 中的 = 之前添加空格？
- python - pyvisa 无法使用 GPIB-USB-HS 接口连接到 GPIB 仪器
- crystal-reports - 如何在 Crystal Reports 中将“07/03/2018”格式化为“2018 年 3 月 7 日”
- php - 如果数组索引的第一个为空，则图像不会上传
- oracle - Oracle order by in select 取决于参数
- python - 循环数据框列以将县转换为坐标
- django - Django 绝对 __in 查询
- javascript - 如何更改 Sails JS 中间件的默认配置