Восстановление маршрутов после обновления

Question

У меня возникли некоторые проблемы с работой маршрутизации в Аурелии.

Когда пользователь заходит в мое приложение, если он ранее прошел аутентификацию, я хочу перенаправить его на целевую страницу. Если нет, перейдите на страницу входа.

У меня аутентифицированный пользовательский редирект работает нормально (app.js -> login.js -> setupnav.js -> целевая страница).

Проблема, которую я имею сейчас:

• Когда пользователь обновляет страницу (http://localhost:8088/aurelia-app/#/landing), landing route больше не существует, и в консоль выдается ошибка (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");
    }
}

Answer 1

Чтобы отобразить неизвестный маршрут на определенную страницу, используйте 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') когда пользователь нажал на ссылку / кнопку.

Вот ответ на связанный вопрос, который может быть полезен: /questions/33519417/kak-pereklyuchatsya-mezhdu-stranitsej-vhoda-i-prilozheniem-s-pomoschyu-aurelia/33519437#33519437