[英]Login page before main (Aurelia)
我想當用戶來時檢查他是否之前登錄-如果不是->重定向到登錄頁面->如果他的電子郵件和密碼還可以->重定向回到歡迎頁面。
我遇到什么問題->服務與登錄類一起正常工作,但歡迎類完全忽略了服務中的任何更改。
export class Users {
users = [
{ name: 'Lucian', email: 'lucian1992@zalando.de', password: 'lucian' },
{ name: 'Corki', email: 'corki2010@supplier.de', password: 'corki' },
{ name: 'Vayne', email: 'vaynii@zalando.de', password: 'vayne' }];
securedUser = {};
error = {};
usedOnce = 0;
check(checkUser) {
this.usedOnce = 1;
this.securedUser = this.users.filter((user) => user.email === checkUser.email
&& user.password === checkUser.password)[0];
if (typeof this.securedUser === 'undefined'){
this.error = { message: "No such kind of user or wrong password" };
}
}
}
import {inject} from 'aurelia-framework';
import {Users} from 'users-list';
import {Router} from 'aurelia-router';
@inject(Users, Router)
export class Login {
constructor(userData, router) {
this.router = router;
this.users = userData.users;
this.check = userData.check;
this.securedUser = userData.securedUser; // Changed after check function
this.userError = userData.error;
}
checkUser = {};
login() {
this.check(this.checkUser);
if (typeof this.userError === 'undefined') {
alert(this.error.message);
} else {
this.router.navigate("")
}
}
}
import {inject} from 'aurelia-framework';
import {Users} from 'users-list';
import {Redirect} from 'aurelia-router';
@inject(Users)
export class Overview {
constructor(userData) {
this.usedOnce = userData.usedOnce;
this.securedUser = userData.securedUser; // This object changed in login.js, but totally ignores in this class
}
heading = 'Welcome to the Article Manager Prototype!';
canActivate() {
if (this.securedUser) {
return new Redirect('/login')
}
}
}
因此,secureUser在login.js中發生了技術問題,但在welcome.js中卻被完全忽略了。 這是因為可以使用canActivate方法嗎? 因為我也使用activate()-同樣的問題。
將不勝感激任何幫助理解問題。
官方文檔中有針對您問題的解決方案:
import {Redirect} from 'aurelia-router';
export class App {
configureRouter(config) {
config.title = 'Aurelia';
config.addPipelineStep('authorize', AuthorizeStep);
config.map([
{ route: ['welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title:'Welcome' },
{ route: 'flickr', name: 'flickr', moduleId: 'flickr', nav: true, auth: true },
{ route: 'child-router', name: 'childRouter', moduleId: 'child-router', nav: true, title:'Child Router' },
{ route: '', redirect: 'welcome' }
]);
}
}
class AuthorizeStep {
run(navigationInstruction, next) {
if (navigationInstruction.getAllInstructions().some(i => i.config.auth)) {
var isLoggedIn = /* insert magic here */false;
if (!isLoggedIn) {
return next.cancel(new Redirect('login'));
}
}
return next();
}
}
請注意config.addPipelineStep('authorize', AuthorizeStep);
與常規路由器配置邏輯相比。
來源: http : //aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.2.2/doc/article/cheat-sheet/7 (您需要向下滾動至“自定義”部分導航管道”)
我嘗試了一個自己的例子,也許我找到了你的問題。
您正在檢查您的securedUser
是否為null。 如果不為空,您將重新login
canActivate() {
if (this.securedUser) { // change to !this.securedUser
return new Redirect('/login')
}
}
並且您將您的secureUser初始值設置為一個空對象:
securedUser = {};
因此,即使條件錯誤,您的第一個重定向也可以正常工作。 不要設置初始值,設置未定義或更改if條件並檢查sercuredUser
屬性。
您的解決方案可能會起作用,但是如果必須授權50條路由,則必須使用canActivate
hook 50次! 對於授權工作流程而言,這不是一個很好的解決方案。
這是一個更優雅的解決方案:
創建一個隔離的根組件,然后更新main.js文件,而不是使用“路由”進行登錄:
//for example, imagine that your root component is located at src/app/app.js
//and your login component at src/login/login.js
//app.isLoggedIn() checks if the credentials/tokens are OK
aurelia.start().then(a => {
let rootComponent = '' app.isLoggedIn() ? 'app/app' : 'login/login';
a.setRoot(rootComponent, document.body);
});
現在,您必須在login / login.js根組件中配置路由器:
configureRouter(config, router) {
config.title = 'YourTitle';
config.map([
{ route: '', name: 'user-password', moduleId: './user-password', title: 'Sign In' }, //route for "username/password" screen
{ route: 'forgot-password', name: 'forgot-pwd', moduleId: './forgot-pwd', title: 'Forgot Password?' } //example of "forgot password" screen
]);
config.mapUnknownRoutes(instruction => {
//if an unknown route has been found,
//a route from the app component, 'users/add' for example
//redirect to sign-in component
return './user-password';
});
this.router = router;
}
創建適當的方法來認證用戶,然后將其重定向到app/app
組件:
//import and inject { Aurelia } from 'aurelia-framework';
this.aurelia.setRoot('app/app');
現在,如果未經授權的用戶訪問“用戶/添加”,它將被重定向到登錄頁面。 如果登錄成功,將顯示“用戶/添加”頁面。
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.