[英]Rebuilding routes after refresh
我無法在Aurelia中使一些路由工作正常工作。
當用戶訪問我的應用程序時,如果他們以前已通過身份驗證 ,我想將他們重定向到登錄頁面。 如果沒有,請直接進入登錄頁面。
我已通過身份驗證的用戶重定向正常運行(app.js-> login.js-> setupnav.js->登陸頁面)。
我現在遇到的問題是:
http://localhost:8088/aurelia-app/#/landing
)時,不再存在landing
路線,並且在控制台中引發了錯誤( ERROR [app-router] Error: Route not found: /landing(…)
)。 如果找不到路由,我想引導用戶login
。 有人知道我如何將用戶從一條丟失的路線重定向到我的login
頁面嗎?
也歡迎任何有關我如何設置路由的評論。
app.js
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import {FetchConfig} from 'aurelia-auth';
import {AuthorizeStep} from 'aurelia-auth';
import {AuthService} from 'aurelia-auth';
@inject(Router,FetchConfig, AuthService )
export class App {
constructor(router, fetchConfig, authService){
this.router = router;
this.fetchConfig = fetchConfig;
this.auth = authService;
}
configureRouter(config, router){
config.title = 'VDC Portal';
config.addPipelineStep('authorize', AuthorizeStep); // Add a route filter to the authorize extensibility point.
config.map([
{ route: ['','login'], name: 'login', moduleId: './login', nav: false, title:'Login' },
{ route: '', redirect: "login" },
{ route: 'setupnav', name: 'setupnav', moduleId: './setupnav', nav: false, title:'setupnav' , auth:true}
]);
this.router = router;
}
activate(){
this.fetchConfig.configure();
}
created(owningView: View, myView: View, router){
/* Fails to redirect user
if(this.auth.isAuthenticated()){
console.log("App.js ConfigureRouter: User already authenticated..");
this.router.navigate("setupnav");
}
*/
}
}
login.js
import {AuthService} from 'aurelia-auth';
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
@inject(AuthService, Router)
export class Login{
constructor(auth, router){
this.auth = auth;
this.router = router;
if(this.auth.isAuthenticated()){
console.log("Login.js ConfigureRouter: User already authenticated..");
this.router.navigate("setupnav");
}
};
heading = 'Login';
email='';
password='';
login(){
console.log("Login()...");
return this.auth.login(this.email, this.password)
.then(response=>{
console.log("success logged");
console.log(response);
})
.catch(err=>{
console.log("login failure");
});
};
}
重定向到:
setupnav.js
import {Router} from 'aurelia-router';
import {inject} from 'aurelia-framework';
@inject(Router)
export class Setupnav{
theRouter = null;
constructor(router){
console.log("build setupnav. router:" + this.theRouter);
this.theRouter = router
};
activate()
{
this.theRouter.addRoute( { route: 'landing', name: 'landing', moduleId: 'landing', nav: true, title:'Integration Health' , auth:true});
this.theRouter.addRoute( { route: 'tools', name: 'tools', moduleId: 'tools', nav: true, title:'Integration Tools' , auth:true});
this.theRouter.refreshNavigation();
this.theRouter.navigate("landing");
}
}
要將未知路線映射到特定頁面,請使用mapUnknownRoutes
功能:
configureRouter(config, router) {
...
config.mapUnknownRoutes(instruction => {
return 'login';
});
}
也就是說,將所有與身份驗證相關的邏輯排除在路由之外,而根據用戶的身份驗證狀態,使用setRoot
設置適當的根模塊可能會更容易。
標准的main.js
如下所示:
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(a => a.setRoot());
}
您可以將邏輯更改為如下所示:
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => {
if (userIsAuthenticated) {
return aurelia.setRoot('app');
}
if (userPreviouslyAuthenticated) {
return aurelia.setRoot('login');
}
return aurelia.setRoot('landing');
});
}
在上面的示例中, app
模塊是唯一可以配置路由的模塊。 該login
模塊將其稱為登錄頁面setRoot('app')
一旦用戶在成功登錄。在landing
頁面會叫setRoot('login')
當用戶點擊的鏈接/按鈕。
這是一個可能有用的相關問題的答案: https : //stackoverflow.com/a/33458652/725866
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.