0

Я хочу реализовать два "guard". Один будет запрещать неавторизированным пользователям получить доступ к определенной странице. А второй будет блокировать страницы "sign-in" и "sign-up" после того как пользователь вошел в систему. Но у меня оба "guard" не работают. Первый пускает всех подряд, а второй не пускает никого на страницу, даже если пользователь не авторизировался, просто белая страница и неполный url выходит, то есть вместо localhost:4200/sign-in выдает просто localhost:4200.

routes:

import { Routes } from '@angular/router';
import { SignUpComponent } from './app/login/sign-up/sign-up.component';
import { SignInComponent } from './app/login/sign-in/sign-in.component';
import { ChatRoomComponent } from './app/layout/chat-room/chat-room.component';
import { PreventLoggedInAccess } from './app/shared/guards/prevent-logged-in.access';
import { AuthGuard } from './app/shared/guards/auth.guard';

export const appRoutes: Routes = [
    { path: '', redirectTo: 'chat', pathMatch: 'full'},
    { path: 'sign-up', component: SignUpComponent, canActivate: [PreventLoggedInAccess]  },
    { path: 'sign-in', component: SignInComponent, canActivate: [PreventLoggedInAccess]  },
    { path: 'chat', component: ChatRoomComponent, canActivate: [AuthGuard] }
];

auth.guard.ts:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from "@angular/router";
import { AuthService } from "../../services/auth.service";

@Injectable()

export class AuthGuard implements CanActivate {

    constructor(private authService:AuthService,
        private router:Router){}

  canActivate() {
    if(this.authService.authUser()){
      return true;
    }else{
      this.router.navigate(['/sign-in']);
      return false;
    }
  }
} 

prevent-logged-in.access.ts:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from "../../services/auth.service";

@Injectable()

export class PreventLoggedInAccess implements CanActivate {

  constructor(
    private authService:AuthService
  ) {}

  canActivate() {
    return !this.authService.authUser();
  }
} 

authservice:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import { User } from '../models/user.model';

@Injectable()

export class AuthService {
  private user: Observable<firebase.User>;
  private authState: any;

  constructor(private dbAuth: AngularFireAuth,
    private db: AngularFireDatabase,
    private router: Router) {
      this.user = dbAuth.authState;
    }

    authUser() {
      return this.user;
    }
....

}

1 ответ 1

1

Ваша проблема заключается в том, что вы синхронно пытаетесь работать с асинхронными функциями, я вижу что AuthService.authUser возвращает Observable с контекстом User, если я правильно понимаю, то firebase делает запрос на свое API и проверяет данного пользователя. Поэтому когда вы пишите:

return !this.authService.authUser();

Это можно представить точно также:

import { of } from 'rxjs/observable/of';

return !of(firebase.User);

Такая конструкция всегда будет возвращать false, правильно было бы использовать оператор map который преобразует возвращаемое значение потока (забыли про pipeable операторы):

import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators/map';

return of(firebase.User).pipe(
    map((user) => {
        return !user.isAuthenticated;
    })
);

canActivate может возвращать 3 разных типа - boolean | Promise<boolean> | Observable<boolean>, если отойти в сторону от Observable, дабы не усложнять и не грузить вас pipeable операторами, будем использовать Promise:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

import { take } from 'rxjs/operators/take';

import { AuthService } from '../../services/auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(
        private authService: AuthService,
        private router: Router
    ){}

    public canActivate(): Promise<boolean> {
        return new Promise((resolve) => {
            this.authService.authUser().pipe(take(1)).subscribe((user) => {
                if (!user) {
                    this.router.navigate(['/sign-in']);
                    resolve(false);
                } else {
                    resolve(true);
                }
            });
        });
    }
}

Здесь я могу ошибаться, потому что я не знаю, что возвращает ваш firebase, вам нужно сделать проверку на значение в колбеке subscribe. То есть если пользователь авторизован - вам вернутся одни данные, как пример { isAuthenticated: true }, делаете проверку на данное свойство if (user.isAuthenticated) { resolve(true) } .... и наоборот.

Точно также и со вторым защитником:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

import { take } from 'rxjs/operators/take';

import { AuthService } from '../../services/auth.service';

@Injectable()
export class PreventLoggedInAccess implements CanActivate {
    constructor(private authService:AuthService) {}

    public canActivate(): Promise<boolean> {
        return new Promise((resolve) => {
            this.authService.authUser().pipe(take(1)).subscribe((user) => {
                if (user) {
                    resolve(false);
                } else{
                    resolve(true);
                }
            });
        });
    }
} 

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.