首页 文章

React native persist并加密用户令牌 - Redux-persist-transform-encrypt错误

提问于
浏览 次
0

似乎在react-native中使用redux-persist的encrypt选项存在问题：

https://github.com/maxdeviant/redux-persist-transform-encrypt/issues/15

任何人都可以帮助解决任何解决方案/解决方法使用redux persist来加密并在react-native中存储登录令牌吗？

当我尝试使用redux persist和redux-persist-transform-encrypt时，我得 Redux-persist-transform-encrypt: expected outbound state to be a string error

import { createStore, compose, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import { persistStore, autoRehydrate } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import createEncryptor from 'redux-persist-transform-encrypt';
import reducers from './reducers';


const store = createStore(
  reducers,
  {},
  compose(
    applyMiddleware(ReduxThunk),
    autoRehydrate(),
  ),
);

const encryptor = createEncryptor({
  secretKey: 'my-super-secret-key-999',
});


persistStore(
  store,
  {
    storage: AsyncStorage,
    whitelist: ['auth'],
    transforms: [encryptor],
  },
);
export default store;

我的身份验证状态是这样的：

const INITIAL_STATE = {
  user: null,
  token: ''
};

在使用redux persist时，有没有使用redux-persist-transform加密或转换和其他包加密令牌的解决方案？

encryption react-native redux asyncstorage

2 回答

  • 2

    我找到了一个使用customTransform而不是redux-persist-transform-encrypt的解决方案：

    import { createStore, compose, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import { persistStore, createTransform, autoRehydrate } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import CryptoJS from 'crypto-js';
import reducers from './reducers';


const store = createStore(
  reducers,
  {},
  compose(
    applyMiddleware(ReduxThunk),
    autoRehydrate(),
  ),
);

const encrypt = createTransform(
  (inboundState, key) => {
    if (!inboundState) return inboundState;
    const cryptedText = CryptoJS.AES.encrypt(JSON.stringify(inboundState), 'secret key 123');

    return cryptedText.toString(); 
  },
  (outboundState, key) => {
    if (!outboundState) return outboundState;
    const bytes = CryptoJS.AES.decrypt(outboundState, 'secret key 123');
    const decrypted = bytes.toString(CryptoJS.enc.Utf8);

    return JSON.parse(decrypted);
  },
);

persistStore(
  store,
  {
    storage: AsyncStorage,
    whitelist: ['auth'], // <-- keys from state that should be persisted
    transforms: [encrypt],
  },
);
export default store;

    当使用redux-persist初始状态在再水化完成之前被触发，所以我也必须应用它：

    https://github.com/rt2zz/redux-persist/blob/master/docs/recipes.md#delay-render-until-rehydration-complete

    回复于
  • 1

    这对我有用：

    import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import createEncryptor from 'redux-persist-transform-encrypt';

import storage from 'redux-persist/lib/storage';
import rootReducer from '/path/to/your/rootReducer';

const encryptor = createEncryptor({
  secretKey: 'omg-this-is-some-secret-stuff',
});

const persistConfig = {
  key: 'root',
  storage,
  transforms: [encryptor],
};

const reducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(reducer);
export const persistor = persistStore(store);
    回复于

相关问题