Проверьте состояние аутентификации из Firebase с помощью Ngrx

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

У меня есть начальное состояние, в котором logged равно false, и когда я пытаюсь зарегистрироваться CanActivate(), logged возвращается как false.

Я проверил Redux DevИнструменты, и состояние аутентификации изменилось, поэтому зарегистрированное значение изменилось на true.

Что я делаю неправильно? Как я могу проверить, аутентифицирован ли пользователь с помощью NGRX?

Guard.ts

 constructor(
    private _store: Store<fromAuth.AuthState>
  ) { }

 canActivate(): Observable<boolean> {
      return this.checkUserLogged(); // Return is always false 
 }

 private checkUserLogged() {
      return this._store.select(fromAuth.isLogged).pipe(take(1));
 }

app.component.ts

    import { Store } from '@ngrx/store';
    import * as fromAuth from '@myapp/store/reducers/auth.reducer';
    import * as authActions from '@myapp/store/actions/auth.actions';

     constructor(
         private _store: Store<fromAuth.AuthState>,
     ) {

    this._store.dispatch(new authActions.GetUser());

auth.reducer.ts

 export interface AuthState {
     logged: boolean;
 ;

 export const initialState: AuthState = {
     logged: false,
 };


 export function authReducer(state = initialState, action: Action): 
    AuthState {

switch (action.type) {

    case authActions.GET_USER:
        return {
            ...state,
            logged: false
        };

    case authActions.AUTHENTICATED:
        return {
            ...state,
            ...action.payload,
            loading: false,
            logged: true,
        };

      // emitted ....

 }

 export const getAuthState = createFeatureSelector<AuthState>('auth');

 export const isLogged = createSelector(
     getAuthState, (state: AuthState) => 
     state.logged);

auth.effects.ts

@Injectable({
    providedIn: 'root'
})

export class AuthEffects {

constructor(
    private _actions: Actions,
    private _angularFireAuth: AngularFireAuth) { }

@Effect()
getUser$: Observable<Action> = this._actions.pipe(
    ofType(authActions.GET_USER),
    switchMap(() => this._angularFireAuth.authState),
    switchMap(user => forkJoin([
        from(user.getIdTokenResult(true)), of(user)])
        .pipe(map(([token, user]) => {

            if (user) {
                const authState = {
                    firestoreCollection: token.claims.firestoreCollection,
                    user: {
                        admin: token.claims.admin,
                        uid: user.uid,
                        displayName: user.displayName
                    }
                };

                // You are returning this action
                // Soon after logged in should be true.
                return new authActions.Authenticated(authState);

            } else {
                return new authActions.NotAuthenticated();
            }
        }))),
    catchError((error) => of(new authActions.AuthError(error)))
)

}

Помог ли мой ответ решить проблему?

user4851087 29.04.2019 06:49
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
1
1 000
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

import * as fromRoot from '@core/store/reducers/index';
import { AuthState } from './reducers/auth.reducer';
import { createFeatureSelector, createSelector } from '@ngrx/store';

export interface State extends fromRoot.State {
  auth: AuthState;
}

export const selectAuthState = createFeatureSelector<AuthState>('authModule');

export const selectIsLoginState = createSelector(
  selectAuthState,
  state => state.logged
);

В основном вам нужно создать селектор для получения данных из хранилища, используя createFeatureSelector, createSelector

Я добавил фильтр(), чтобы проверить, когда загрузка верна, когда загрузка верна, он не проверяет, верно ли в журнале.

Luiz Ricardo Cardoso 29.04.2019 13:50

Другие вопросы по теме