Question

我正在尝试检查我的应用程序的身份验证状态，以确认它具有经过身份验证的用户。

我的初始状态是logged为假，并且当我尝试签入CanActivate()时，记录返回为假。

我签入了 Redux DevTools ，并且auth状态已更改，因此记录的值已更改为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)))
)

}

Answer 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创建选择器以从商店中获取数据

使用Ngrx从Firebase检查身份验证状态

1 个答案: