ngrx-存储-本地存储:加密/解密存储

Question

我试图通过ngrx-store-localstorage加密存储，就像它在文档中显示的那样：

import { ActionReducer, MetaReducer } from '@ngrx/store';
import { localStorageSync } from 'ngrx-store-localstorage';

export function _localStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
  return localStorageSync({
    keys: [{
      'user': {
        encrypt: state => btoa(state),
        decrypt: state => atob(state)
      }
    }],
    rehydrate: true,
    removeOnUndefined: true
  })(reducer);
}

但我有个错误：

Uncaught :未能在“窗口”上执行“atob”：要解码的字符串没有正确编码。

如何做好呢？

Answer 1

弗拉基米尔。根据这些文件，钥匙应采用以下两种形式之一：

 1) Array of strings that represents the state.  (or)

 2) Array of Objects with key, and value pairs where the key represents the state and the value represents the additional functions like encrypt and decrypt.

因此，请尝试以下方法：

import { ActionReducer, MetaReducer } from '@ngrx/store';
import { localStorageSync } from 'ngrx-store-localstorage';

export function _localStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
  return localStorageSync({
    keys: [
{
      user: {
        encrypt: state => btoa(state),
        decrypt: state => atob(state)
           }
}

],
    rehydrate: true,
    removeOnUndefined: true
  })(reducer);
}

注意:键用户应该正确地表示。试着修好它。

如果您有多个密钥，您可以使用如下所示：

{ .... all imports ....}
 
const SECURE_DATA =  {
  encrypt : ( state:string) => btoa(state),
  decrypt : ( state:string ) => atob(state)
}

const STORE_KEYS_TO_PERSIST = [
  { auth : SECURE_DATA },
  { users : SECURE_DATA },
 ...
];

export interface StoreState {
  auth: User;
  users: UserReducer;
 ...
}

export const reducers: ActionReducerMap<StoreState> = {
  auth: authReducer,
  users: userReducer,
  ...
};

export function localStorageSyncReducer(
  reducer: ActionReducer<StoreState>
): ActionReducer<StoreState> {
  return localStorageSync({
    keys: STORE_KEYS_TO_PERSIST,
    rehydrate: true,
  })(reducer);
}