Javascript 刷新后重建路由

我在奥雷莉亚找一些路由工具有点麻烦

当用户访问我的应用程序时，如果他们之前已通过身份验证，我希望将他们重定向到登录页。如果没有，请直接转到登录页面

我已验证用户重定向工作正常（app.js->login.js->setupnav.js->登录页）

我现在的问题是：

• 当用户刷新页面时（

  http://localhost:8088/aurelia-app/#/landing

  ），登陆路径不再存在，控制台中抛出错误（

  错误[app router]错误：未找到路径：/landing（…）

  ）。如果找不到路线，我想指示用户登录

有人知道如何将用户从丢失的路径重定向到我的

登录页面吗？

此外，欢迎对我如何设置路由提出任何意见

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

要将未知路线映射到特定页面，请使用
mapunnownRoutes
功能：

configureRouter（配置，路由器）{
...
config.mapUnknownRoutes（指令=>{
返回“登录”；
});
}

也就是说，将所有与身份验证相关的逻辑排除在路由之外可能更容易，而使用
setRoot
根据用户的身份验证状态设置适当的根模块

标准的
main.js
如下所示：

main.js

导出功能配置（aurelia）{
奥雷莉亚。用途
.standardConfiguration（）
.developmentLogging（）；
然后（a=>a.setRoot（））；
}

您可以将逻辑更改为如下内容：

main.js

导出功能配置（aurelia）{ 奥雷莉亚。用途 .standardConfiguration（） .developmentLogging（）； aurelia.start（）。然后（（）=>{ 如果（userIsAuthenticated）{ 返回aurelia.setRoot（'app'）； } 如果（用户先前已验证）{ 返回aurelia.setRoot（'login'）； } 返回aurelia.setRoot（'landing'）； }); } 在上面的示例中，

app

模块是唯一配置路由的模块。

login

模块将是一个登录页面，一旦用户成功登录，该页面将被称为

setRoot（'app'）

。当用户单击链接/按钮时，

landing

页面将调用

setRoot（'login'）

以下是一个可能有用的相关问题的答案：

---

config.mapUnknownRoutes

正是我想要的，谢谢！我正在使用这个插件，所以我认为我不能在

main.js

中使用它。你应该更改

router.navigate（'login'）到
返回“登录”否则您将在控制台中得到一个错误。我试着编辑你的文章，但被拒绝了：我想被拒绝是因为你的编辑有一个打字错误。让我看看能不能修好它。