React nativen bestehen bleiben und zu verschlüsseln Benutzertoken - Redux-persistieren-Transformations-encrypt Fehler

Question

Es scheint, es ist ein Problem, das encrypt Option von redux-persistieren in reagieren-native mit:

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

kann jemand helfen mit jeder Lösung/Workaround, Redux Persist zu verwenden, um ein Login-Token in react-native zu verschlüsseln und zu speichern?

Wenn ich versuche, die redux zu verwenden bestehen mit dem redux-persistieren-Transformations-encrypt i 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; 

Mein Auth Zustand so etwas wie dieses erhalten:

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

Gibt es eine Lösung zu verwenden redux-persist-transform encrypt oder die Transform und andere Paket zu verschlüsseln das Token bei der Verwendung von redux persist?

Answer 1

fand ich eine Lösung, die die customTransform statt redux-persistieren-Transformations-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; 

Wenn vor rehydrierende ausgelöst redux-persistieren Anfangszustand verwendet, ist fertig, also musste ich diese auch anzuwenden:

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