Question

我正在尝试开发用于学习目的的React / Redux应用程序，我想知道到目前为止我做的是一个好的做法还是不推荐。我必须处理的第一件事是处理授权请求。我有一个restfull api Rails后端。此服务器响应附加在头参数（如access-token）中的登录请求。此访问令牌仅对下一个请求有效，而下一个请求又返回一个对下一个请求有效的新令牌，依此类推。

我以这种方式实现了这个流程：商店调度执行登录请求的动作，传递用户名和密码。然后，当响应准备就绪时，我将凭证存储在redux存储中。当我需要执行授权请求时，我在头请求中设置这些参数。当我收到回复时，我会使用我从响应中获得的新凭据更新商店中的凭据。

这里我的代码更清晰：

import { combineReducers } from 'redux'
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const initialState = {
  currentUser: {
    credentials: {},
    user: {}
  },
  test: {},
  users: []
}

export const SUBMIT_LOGIN = 'SUBMIT_LOGIN'
export const SET_USER = 'SET_USER'
export const TEST = 'TEST'
export const SET_USERS = 'SET_USERS'
export const SET_CREDENTIALS = 'SET_CREDENTIALS'

//actions
const submitLogin = () => (dispatch) => {
  return postLoginRequest()
    .then(response => {
      dispatch(setCredentials(
        response.headers.get('access-token'),
        response.headers.get('client'),
        response.headers.get('expiry'),
        response.headers.get('token-type'),
        response.headers.get('uid')
      ));
      return response
    })
    .then(response => {
      return response.json();
    })
    .then(
      (user) => dispatch(setUser(user.data)),
    );
}

const performRequest = (api) => (dispatch) => {
  return api()
    .then(response => {
      dispatch(setCredentials(
        response.headers.get('access-token'),
        response.headers.get('client'),
        response.headers.get('expiry'),
        response.headers.get('token-type'),
        response.headers.get('uid')
      ));
      return response
    })
    .then(response => {return response.json()})
    .then(json => {console.log(json)})
}

const setUsers = (users) => {
  return {
    type: SET_USERS,
    users
  }
}

const setUser = (user) => {
  return {
    type: SET_USER,
    user
  }
}

const setCredentials = (
  access_token,
  client,
  expiry,
  token_type,
  uid
) => {
  return {
    type: SET_CREDENTIALS,
    credentials: {
      'access-token': access_token,
      client,
      expiry,
      'token-type': token_type,
      uid
    }
  }
}

const currentUserInitialState = {
  credentials: {},
  user: {}
}

const currentUser = (state = currentUserInitialState, action) => {
  switch (action.type) {
    case SET_USER:
      return Object.assign({}, state, {user: action.user})
    case SET_CREDENTIALS:
      return Object.assign({}, state, {credentials: action.credentials})
    default:
      return state
  }
}

const rootReducer = combineReducers({
  currentUser,
  test
})

const getAuthorizedHeader = (store) => {
  const credentials = store.getState().currentUser.credentials
  const headers = new Headers(credentials)
  return headers
}

//store creation

const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore);

const store = createStoreWithMiddleware(rootReducer);

const postLoginRequest = () => {
  return fetch('http://localhost:3000/auth/sign_in', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email: 'test@test.com',
      password: 'password',
    })
  })
}

const getUsers = () => {
  const autorizedHeader = getAuthorizedHeader(store)
  debugger
  return fetch('http://localhost:3000/users',
    {
      method: 'GET',
      headers : autorizedHeader
    }
  )
}


store.dispatch(submitLogin())

setTimeout(() => {
  console.log(store.dispatch(performRequest(getUsers)))
}, 2000)

我想知道是否在商店中存储了合理的数据，如果不是，我愿意接受以更好的方式开发此工作流程的任何建议。

我的服务器上还有这个参数

config.batch_request_buffer_throttle = 5.seconds

有时需要同时向API发出多个请求。在这种情况下，批处理中的每个请求都需要共享相同的身份验证令牌。此设置确定在仍使用相同的身份验证令牌时请求可以相隔多远。

这样，如果令牌仍然有效，我就无法在performRequest函数中调度setCredentials动作，但我真的没有想法如何检查它。

由于

Answer 1

不。这不是一个好习惯。如果您希望使用cookie会话更好地存储用户会话，以在React.js的情况下存储JWT。

如果使用react-native-keychain来进行本机响应，我也建议将其存储为JWT令牌或加密文本而不是纯文本。

您的实现主要取决于您的后端。如果您使用passport.js之类的库（对于node.js服务器）。但是无论什么方式意味着您必须进行身份验证，请不要将其存储在状态中。

Answer 2

使用Modern Storage API将为您提供帮助。

在Redux Store中提取身份验证数据时，如果刷新页面或移动历史记录（后退|| go），则存储值不再存在。并且您的应用将在刷新后请求Auth数据..刷新..

...

使用window.sessionStorage可以在刷新或历史记录移动后保留数据。


  [AFTER LOGIN EVENT]

    window.sessionStorage.setItem(key,vlaue)

  [AFTER LOGOUT EVENT]

    window.sessionStorage.clear() <- removes all records in sessionStorage.
    window.sessionStorage.removeItem(key)

在Redux商店中存储凭据是一种很好的做法吗？

2 个答案: