我正在尝试开发一个React/Redux应用程序来进行学习，并且想知道迄今为止我所做的是否是良好的实践或不建议使用。 我首先要处理的是处理授权请求。 我有一个restful api Rails后端。该服务器响应登录请求并在标头参数中附加access-token等参数。 这个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操作，但我确实没有想法如何检查它。
谢谢