Angular 5 RxJS и перенаправление на страницу панели инструментов без предварительной загрузки главной страницы - PullRequest
Новая
       11

Angular 5 RxJS и перенаправление на страницу панели инструментов без предварительной загрузки главной страницы

0 голосов
/ 04 мая 2018

Я использую систему Firebase в качестве API в своем приложении (аутентификация, база данных, хранилище и т. Д.)

Я создал главную страницу (localhost: 4200), которая загружается, когда пользователь не вошел в систему, и панель мониторинга (localhost: 4200 / dashboard) для зарегистрированных пользователей.

В моем конструкторе app.component.ts я пишу код: 

    constructor(private authorizationService: AuthorizationService,
              private router: Router,
              private firebaseAuth: AngularFireAuth,
              private firebaseDatabase: AngularFireDatabase,
              private firebaseStorage: AngularFireStorage) {

    firebaseAuth.authState.subscribe((firebaseUser) => {
      if (firebaseUser != null) {
        this.firebaseUser = firebaseUser;
        this.router.navigate(['dashboard']);
      }
    });
  }

и в app.component.html 

<router-outlet></router-outlet>

app.routing.module.ts: 

import {NgModule} from '@angular/core';
import {AuthorizationService} from './services/authorization.service';
import {RouterModule, Routes} from '@angular/router';
import {DashboardPageComponent} from './private/dashboard-page/dashboard-page.component';
import {CanActivateAuthGuard} from './can-activate-auth-guard';
import {LoginPageComponent} from './public/login-page/login-page.component';
import {MainPageComponent} from './public/main-page/main-page.component';
import {RegisterPageComponent} from './public/register-page/register-page.component';
import {ContactPageComponent} from './public/contact-page/contact-page.component';

const appRoutes: Routes = [
  {path: '', component: MainPageComponent, pathMatch: 'full'},
  {path: 'login', component: LoginPageComponent},
  {path: 'register', component: RegisterPageComponent},
  {path: 'contact', component: ContactPageComponent},
  {path: 'dashboard', component: DashboardPageComponent, canActivate: [CanActivateAuthGuard]}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    AuthorizationService
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
}

может реактивировать-AUTH-guard.ts: 

import {Injectable} from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {AngularFireAuth} from 'angularfire2/auth';

@Injectable()
export class CanActivateAuthGuard implements CanActivate {
  constructor(private router: Router,
              private firebaseAuth: AngularFireAuth) {
  }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.firebaseAuth.authState
      .map(authState => !!authState)
      .do(angularFireAuth => !angularFireAuth ? this.router.navigate(['/']) : true);
  }
}

Но перед тем, как завершить метод подписки, главная страница загружается с большой скоростью, а через некоторое время перенаправляет на /dashboard.

.

Я вставляю видео, когда записываю свою проблему: https://drive.google.com/open?id=1VwgGynxUFPdcpLPkMVopncLEQP-LpasY

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

Заранее спасибо.

1 Ответ

0 голосов
/ 04 мая 2018

Похоже, у вас какая-то путаница с RxJ и угловыми гвардейцами

Проблема Первая проблема связана со следующим фрагментом кода. 

return this.firebaseAuth.authState
  .map(authState => !!authState)
  .do(angularFireAuth => !angularFireAuth ? this.router.navigate(['/']) : true);

Здесь оператор Map возвращает логическое значение. Если !! authState имеет значение true, маршрут позволяет перейти к DashboardPageComponent, иначе ничего.

Do Do Operator используется для выполнения побочных операций / побочных эффектов. Оператор Do не преобразует значения (другими словами, не влияет на поток). Здесь оператор do переходит к маршруту '/', если angularFireAuth имеет значение false, иначе ничего. Здесь !angularFireAuth ? this.router.navigate(['/']) : true троичный оператор бесполезен. второе выражение ничего не делает.

Второй вопрос заключается в следующем фрагменте кода в app.component.ts. Нет необходимости писать это. 

firebaseAuth.authState.subscribe((firebaseUser) => {
  if (firebaseUser != null) {
    this.firebaseUser = firebaseUser;
    this.router.navigate(['dashboard']);
  }
});

Решение

Создайте двух охранников. Один LoggedInGuard для component: DashboardPageComponent и другой NotLoggedInGuard для component: MainPageComponent. Или назовите их как хотите.

LoggedInGuard 

return this.firebaseAuth.authState
   .map(authState => !!authState);

NotLoggedInGuard 

return this.firebaseAuth.authState
   .map(authState => !authState);

Напишите приведенный выше код в соответствующих функциях canActivate () и добавьте их в appRoutes, как вы делали раньше.

...