webentwicklung-frage-antwort-db.com.de

Angular 4 Laden Sie die Daten, bevor Sie die Anwendung initialisieren

Ich versuche, einige Daten zu laden, bevor meine Anwendung startet. Der Grund, warum ich es tun muss, ist, dass einige der Menüs auf bestimmte Benutzerbedingungen beschränkt sind, z. B. basierend auf dem Standort des Benutzers.

Wenn der Benutzer noch keinen Standort hat oder sein Standort für den Zugriff auf bestimmte Ansichten nicht aktiviert ist, muss ich ihn blockieren.


Ich habe versucht, die Angular -Auflösungsmethode zu verwenden, ohne Erfolg, das habe ich getan:

Auflösungsschutz

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

Routing

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

Der AuthGuard wird nur nach einer gültigen Cookie-Sitzung suchen.

Wie Sie sehen, ist das Routing, das ich versuche, den Zugriff zu blockieren, das company-Routing Ich kann den Zugriff verhindern, wenn ich zum ersten Mal eine andere Seite lade, beispielsweise wenn der erste Zugriff auf die Seite home und dann erfolgt Ich navigiere zu der Seite company die Validierung funktioniert gut, da die Benutzerdaten und der Standort bereits verfügbar sind.

Wenn jedoch der erste Zugriff auf die Seite company erfolgt, werden alle Benutzer daran gehindert, dorthin zu navigieren, da die Daten zum Zeitpunkt, zu dem LocationGuard versucht, den Benutzerstandort zu überprüfen, noch nicht verfügbar sind.

Ich habe auch versucht, Resolve durch CanActivate zu ersetzen. Die Ansicht wird jedoch nie aktiviert, nachdem die Daten verfügbar sind. Sie bleibt auf einer leeren Seite.

6
celsomtrindade

Ein paar Dinge ...

Das Abrufen von Daten vor dem Laden einer Seite ist eine große Verwendung eines Resolvers.

Den Zugriff auf eine Route zu verhindern, ist eine großartige Verwendung von CanActivate.

Beachten Sie jedoch, dass der Resolver erst funktioniert, nachdem alle Schutzeinrichtungen geprüft wurden. Ihr Code versucht also, CanActivate auszuführen, bevor der Resolver ausgeführt wird.

 enter image description here

10
DeborahK

Ich denke, Sie können APP_INITIALIZER verwenden, um Daten zu laden, bevor die Anwendung startet. 

Überprüfen Sie diesen Artikel.

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

4
M J

Ich habe eine Problemumgehung für diese Frage gefunden.

Ich habe eine Möglichkeit gefunden, canActivate zu verwenden. Ich hatte bereits versucht, .map() zu verwenden, um eine Observable zurückzugeben, aber der Schlüsselpunkt ist .first() am Ende. Dies ist, was das Problem gelöst hat.

Ich halte es offen, denn wenn es einen Weg gibt, mit Resolve dasselbe Ergebnis zu erzielen, ist es vielleicht besser.

0
celsomtrindade