Angular 4 загружает данные перед инициализацией приложения

Я пытаюсь загрузить некоторые данные до запуска моего приложения. Причина, по которой мне нужно это сделать, заключается в том, что некоторые меню имеют ограниченный доступ на основе некоторых условий пользователя, например, на основе местоположения пользователя.

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


Я пытался использовать метод Angular Resolve, но безуспешно, вот что я сделал:

Разрешить охрану

// The apiService is my own service to make http calls to the server.
@Injectable()
export class AppResolveGuard implements Resolve<any> {
    constructor(
        private _api: ApiService,
        private _store: Store<IStoreInterface>,
    ) { }

    resolve(): any {
        return this._api.apiGet('loadData').subscribe(response => {
            this._store.dispatch({
                type: USER_FETCH_DATA,
                payload: response.usuario
            });

            return response;
        });
    }
}

Маршрутизация

export const routing = [
    {
        path: '', component: AppComponent, canActivateChild: [AuthGuard], resolve: {app: AppResolveGuard},
        children: [
            { path: 'home', component: HomeComponent },
            { path: 'company', canActivate: [LocationGuard], component: CompanyComponent },
        ]
    }
];

AuthGuard просто проверит действительный сеанс cookie.

Как видите, маршрутизация, доступ к которой я пытаюсь заблокировать, — это маршрутизация company. Я могу запретить доступ, когда я впервые загружаю другую страницу, например, если первый доступ к странице home, а затем я перехожу на страницу company, проверка работает нормально, поскольку данные пользователя и местоположение уже доступны.

Однако, если первый доступ будет к странице company, он заблокирует всех пользователей для перехода туда, потому что в то время, когда LocationGuard пытается проверить местоположение пользователя, данные еще не доступны.

Я также пытался заменить Resolve на CanActivate, но он никогда не включает представление после того, как данные доступны, он остается на пустой странице.


person celsomtrindade    schedule 09.08.2017    source источник
comment
попробуйте заглянуть в этот stackoverflow.com/a/45204693/415078 в основном вы можете позвонить вам API перед загрузкой AppModule а затем вы можете передать/получить доступ к этим данным в ваших охранниках   -  person angularrocks.com    schedule 09.08.2017
comment
@Kuncevic не может быть решена с помощью углового маршрутизатора? Потому что это все связано с магазином и т.д..   -  person celsomtrindade    schedule 09.08.2017
comment
Тогда звучит так, как будто вы не можете сделать это до инициализации приложения, поскольку вы полагаетесь на магазин и т. д.   -  person angularrocks.com    schedule 09.08.2017


Ответы (3)


Несколько вещей ...

Предварительная выборка данных перед загрузкой страницы — отличное применение преобразователя.

Запрет доступа к маршруту — отличное применение CanActivate.

Обратите внимание, однако, что распознаватель работает только ПОСЛЕ того, как все охранники проверены. Таким образом, ваш код попытается запустить CanActivate до запуска распознавателя.

введите описание изображения здесь

person DeborahK    schedule 09.08.2017
comment
Хм .. Так что идти с canActivate (например, я комментирую здесь свой собственный ответ) - это путь? - person celsomtrindade; 09.08.2017
comment
Я недостаточно хорошо понимаю ваши требования. Но один из вариантов — добавить разрешение к родительскому маршруту и ​​canActivate к дочерним маршрутам. Таким образом, разрешение должно выполняться до запуска дочернего элемента canActivate. - person DeborahK; 09.08.2017
comment
@DeborahK, не могли бы вы помочь мне найти эту схему в официальной документации Angular? Я легко нахожу схему для жизненных циклов компонентов, но не могу найти ту, которую вы предоставили в отношении охранников и распознавателей ????. - person Hadrien TOMA; 12.12.2020
comment
Это несколько обсуждается здесь: angular.io/guide/router- tutorial-toh#milestone-5-route-guards Это то, что вы ищете? - person DeborahK; 17.12.2020

Я думаю, вы можете использовать APP_INITIALIZER для загрузки данных перед запуском приложения.

Проверьте эту статью:

https://devblog.dymel.pl/2017/10/17/angular-preload/

person M J    schedule 20.04.2018

Я нашел обходной путь для этого вопроса.

Я нашел способ использовать canActivate. Я уже пытался использовать .map() для возврата Observable, но ключевым моментом является .first() в конце, это решило проблему.

Я оставлю его открытым, потому что, если есть способ добиться того же результата, используя Resolve, может быть, это лучше.

person celsomtrindade    schedule 09.08.2017