Зависание экрана при установке нескольких корней - PullRequest
Новая
       8

Зависание экрана при установке нескольких корней

0 голосов
/ 29 апреля 2018

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

 aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("modules/login")));

Это должно работать, согласно всему, что я мог найти. На самом деле он устанавливает root в том, что касается кода, поскольку я вижу активность в консоли, но HTML-код на экране никогда не сдвигается с экрана входа в систему. Даже ввод чего-то вручную в адресной строке не меняет HTML. Похоже, что маршрутизатор перестал работать. В консоли не зарегистрировано ошибок. 

import { AuthenticateStep, AuthService } from 'aurelia-authentication';
import { Router} from 'aurelia-router';
import { autoinject, PLATFORM, Aurelia } from "aurelia-framework";

@autoinject()
export class Login {

    constructor(private router: Router, private authService: AuthService, private aurelia:Aurelia) {
            console.log("Starting Login...")
    }

    activate() {
        if (this.authService.authenticated) {
            console.log("is authenticate")
            this.router.navigate('/', { replace: true, trigger: false });

            console.log("setting root to 'app'");
            this.aurelia.setRoot(PLATFORM.moduleName("app"));


        }
        else {
            console.log("not auth");
        }
    }
}

In app.ts 

activate() {
  console.log("app.activate");
  ...

}

This is the console

Есть ли что-то еще, что я должен делать?

Я пробовал: https://github.com/aurelia/framework/issues/400

А это: https://ilikekillnerds.com/2017/07/aurelia-routing-switching-root-using-setroot/

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Установка рута довольно проста, но есть одна оговорка:

Установите его либо в ответ на сгенерированное пользователем событие, либо в прикрепленное событие.

Попытка установить его в активированном событии или конструкторе приведет к зависанию экрана на корневом экране.

Мне потребовался целый день, чтобы понять, поэтому я решил, что передам это.

Вот что сработало для меня: я создал "app-shell", которая установлена ​​в root с помощью main.

В app-shell я проверяю, вошел ли человек в систему или нет, и затем устанавливаю root в зависимости от результатов. 

import { AuthenticateStep, AuthService } from 'aurelia-authentication';
import { AppRouter } from 'aurelia-router';
import { autoinject, PLATFORM, Aurelia } from "aurelia-framework";

@autoinject()
export class AppShell {

    constructor(private router: AppRouter, private authService: AuthService, private aurelia: Aurelia) {

    }

    attached() {
        this.setRoot();
    }

    setRoot() {
        this.router.navigate('/', { replace: true, trigger: false }); //Not actually needed here, but is if the router has already been configured.
        if (this.authService.authenticated) {
            this.aurelia.setRoot(PLATFORM.moduleName("app"));
        }
        else {
            this.aurelia.setRoot(PLATFORM.moduleName("modules/login"));
        }


    }
}
0 голосов
/ 29 апреля 2018

Вот несколько вещей, которые вы можете попробовать:

  • Цепочка обещаний (убедитесь, что навигация выполнена, прежде чем вы скажете aurelia переключить корень) 

    this.router.navigate('/', { replace: true, trigger: false })
    then(() => this.aurelia.setRoot(PLATFORM.moduleName("app")));

  • Разрешить обещания (было бы необходимо, если бы маршрутизатор все еще имел работу после текущего activate, потому что эту работу нужно было бы прервать) 

    return this.router.navigate('/', { replace: true, trigger: false })
    then(() => this.aurelia.setRoot(PLATFORM.moduleName("app")));

  • Убедитесь, что AppRouter переконфигурирован после переключения root (точка останова в configureRouter, вам может потребоваться вручную .reset() маршрутизатор, флаг isConfigured все равно остается верным)

Вы можете попробовать совсем другой подход.

Лично, когда мне нужно переключить root между общедоступной и аутентифицированной оболочкой, у меня просто есть выделенный префикс пути для любого (или обоих), и в моем методе main я устанавливаю правильный корень App на основе текущий window.location.

Пример (в main): 

if (/\/public/.test(window.location.pathname)) {
  au.setRoot(PLATFORM.moduleName("shell/public"));
} else if ((/\/admin/.test(window.location.pathname)) {
  au.setRoot(PLATFORM.moduleName("shell/admin"));
} else {
  au.setRoot(PLATFORM.moduleName("shell/app"));
}

Перенаправление между этими корнями выходит за пределы маршрутизатора, просто с помощью window.location.href = "...";

Несмотря на то, что это, возможно, немного странно, хорошая особенность этого подхода состоит в том, что у вас всегда будет полностью чистое состояние Aurelia после переключения, и, следовательно, вам потребуется меньше времени для очистки после него.

В закрытых корнях вы пытаетесь получить токен аутентификации из localStorage и просто отбросить пользователя обратно до public, если его нет (или у него нет достаточных привилегий).

...