web-dev-qa-db-ja.com

angular ngrx-store-localstorageはリロード後にデータを保存しません

Ngrx-store-localstorageを使用してngrxを認証プロセスに統合し、ブラウザーセッション間でトークンを保存しようとしています。

ログインすると、次のようなストレージでトークンの値を確認できます

{"token":{"token":"e5cb6515-149c-44df-88d1-4ff16ff4169b","expiresIn":10385,"expiresAt":1512082478397},"authenticated":true,"error":false}

しかし、たとえば、ページを編集してアプリをリロードすると、

{"token":null,"authenticated":false,"error":false}

コードアクション

import { Action } from '@ngrx/store';

import { AuthenticationTokenInterface } from '../authentication.interface';

export const LOGIN = 'LOGIN';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILED = 'LOGIN_FAILED';
export const LOGOUT = 'LOGOUT';
export const SET_TOKEN = 'SET_TOKEN';

export class Login implements Action {
  readonly type = LOGIN;
  constructor(public payload: {username: 'string',password: 'string'}) {}
}

export class LoginSuccess implements Action {
  readonly type = LOGIN_SUCCESS;
}

export class LoginFailed implements Action {
  readonly type = LOGIN_FAILED;
}

export class Logout implements Action {
  readonly type = LOGOUT;
}

export class SetToken implements Action {
  readonly type = SET_TOKEN;

  constructor(public payload: AuthenticationTokenInterface) {}
}

export type AuthenticationActions =  Login | LoginSuccess | LoginFailed | Logout | SetToken;

効果

@Injectable()
export class AuthenticationEffects {
  @Effect()
  login$ = this.actions$.ofType(AuthenticationActions.LOGIN)
  .pipe(
    mergeMap((action: AuthenticationActions.Login) => {
       return this.authenticationService.login(action.payload)
       .pipe(
        mergeMap((token:AuthenticationTokenInterface) => {
          this.router.navigate(['/main/dashboard']);
          return [
            { type: AuthenticationActions.LOGIN_SUCCESS },
            { type: AuthenticationActions.SET_TOKEN, payload: token }
          ]
        }),
        catchError(() => {
          return  of({ type: AuthenticationActions.LOGIN_FAILED })
        })
       )
     })
  );
  @Effect({dispatch: false})
  logout$ = this.actions$.ofType(AuthenticationActions.LOGOUT)
  .pipe(
    switchMap(()=>{
      this.router.navigate(['/logout']);
      return this.authenticationService.logout();
    })
  );

  constructor(
    private actions$: Actions,
    private router: Router,
    private authenticationService: AuthenticationService
  ) {}
}

減速機

export interface State {
  token: AuthenticationTokenInterface;
  authenticated: boolean;
  error: boolean;
}

const initialState: State = {
  token: null,
  authenticated: false,
  error: false
};

export function authenticationReducer(
  state = initialState,
  action: AuthenticationActions.AuthenticationActions
):State {
  switch (action.type) {
    case (AuthenticationActions.LOGIN_SUCCESS):
      return {
        ...state,
        authenticated: true,
      };
    case (AuthenticationActions.LOGIN_FAILED):
      return {
        ...state,
        error: true
      };
    case (AuthenticationActions.LOGOUT):
      return {
        ...state,
        token: null,
        authenticated: false
      };
    case (AuthenticationActions.SET_TOKEN):
      return {
        ...state,
        token: action.payload
      };
    default:
      return state;
  }
}

減速機（アプリ）

export interface AppState {
  authentication: fromAuthentication.State
}

export const reducers: ActionReducerMap<AppState> = {
  authentication: fromAuthentication.authenticationReducer
};

アプリモジュール

export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return localStorageSync({keys: ['authentication']})(reducer);
}
const metaReducers: Array<MetaReducer<any, any>> = [localStorageSyncReducer];

imports: [
  StoreModule.forRoot(
      reducers,
      {metaReducers}
  ),
  EffectsModule.forRoot([AuthenticationEffects]),
]
angularauthenticationngrx
12
Whisher

LocalStorageSync関数呼び出しにrehydrateキーを追加する必要があります。

export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return localStorageSync(
     {keys: ['authentication'],
      rehydrate: true})(reducer);
}

詳細は https://github.com/btroncone/ngrx-store-localstorage/blob/master/README.md を参照してください。

11
Mateusz Witkowski

必要なのは、app.moduleファイルにrehydrate boolean set trueのオプションを追加することだけです。

これにより、再読み込み中にlocalStorageからリデューサーの初期状態にデータがプルまたはフェッチされます。

localStorageSyncは次のように構成する必要があります...

localStorageSync(
 {keys: ['authentication'],
  rehydrate: true     <------ add this line
}) (reducer);
2
Foram Sangani