web-dev-qa-db-fra.com

Angular 4 données de chargement avant d'initialiser l'application

J'essaie de charger des données avant le démarrage de mon application. La raison pour laquelle j'ai besoin de le faire est que certains menus ont un accès restreint en fonction de certaines conditions d'utilisation, par exemple, en fonction de l'emplacement de l'utilisateur.

Ainsi, si l'utilisateur ne dispose pas encore d'emplacement ou si son emplacement n'est pas activé pour accéder à certaines vues, je dois le bloquer.

J'ai essayé d'utiliser la méthode Angular Resolve, sans succès, voici ce que j'ai fait:

Résoudre garde 

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

Routage 

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

AuthGuard va juste vérifier si une session de cookie est valide.

Comme vous pouvez le constater, le routage que je tente de bloquer est le routage company . Je peux empêcher l'accès lorsque je charge une autre page pour la première fois, par exemple si le premier accès est la page home Je navigue vers la page company, la validation fonctionne bien, car les données et l'emplacement de l'utilisateur sont déjà disponibles.

Cependant, si le premier accès concerne la page company, tous les utilisateurs seront bloqués, car au moment où LocationGuard tente de valider l'emplacement de l'utilisateur, les données ne sont pas encore disponibles.

J'ai également essayé de remplacer Resolve par CanActivate, mais cela ne permet jamais l'affichage après que les données sont disponibles, elles restent sur une page vierge.

angularangular-routerangular-router-guards
6
celsomtrindade

Quelques choses ...

La pré-extraction des données avant le chargement d'une page est une excellente utilisation d'un résolveur.

Empêcher l'accès à un itinéraire est une excellente utilisation de CanActivate.

Notez cependant que le résolveur ne fonctionne qu'après que tous les gardes ont été vérifiés. Votre code tentera donc d'exécuter CanActivate avant que ne lance le résolveur.

 enter image description here

10
DeborahK

Je pense que vous pouvez utiliser APP_INITIALIZER pour charger des données avant le démarrage de l'application. 

Vérifiez cet article.

http://www.gyanstack.com/preload-data-before-app-init-in-angular-5-app_initializer/

4
M J

J'ai trouvé une solution de contournement sur cette question .

J'ai trouvé un moyen d'utiliser canActivate. J'avais déjà essayé d'utiliser .map() pour renvoyer une Observable, mais le point clé est la .first() à la fin, c'est ce qui a résolu le problème.

Je vais garder ça ouvert, car s'il est possible d'obtenir le même résultat en utilisant Resolve, c'est peut-être mieux.

0
celsomtrindade