我正在尝试使用react / redux来确定我的jwt令牌认证的结构。现在设置的方式是,我使用一种中间件,该中间件在分派动作ATTEMPT_LOGIN_SUCCESS时将令牌保存在localstorage中(注意:localstorage的安全性不重要)。
关于用户是否已登录的初始状态,我目前从本地存储中获取令牌,并在我的登录还原器中进行验证。我的问题是,是否应该把这个逻辑放在我确实要说的地方。
用于保存令牌的jwt处理程序中间件:
import {ATTEMPT_LOGIN_SUCCESS} from "./dataTypes/login"
const jwtHandler = store => next => action => {
switch(action.type){
case ATTEMPT_LOGIN_SUCCESS:
const token = action.payload;
localStorage.setItem("token", token);
}
return next(action);
}
export default jwtHandler;
Login reducer(所讨论的代码是从顶部到初始状态:]
import {
ATTEMPT_LOGIN_BEGIN, ATTEMPT_LOGIN_FAIL, ATTEMPT_LOGIN_SUCCESS
} from "../dataTypes/login";
import authenticateToken from "./authenticateToken";
const token = localStorage.getItem("token");
const isValid = authenticateToken(token); //Decodes and checks date to ensure valid
if(!isValid){
localStorage.setItem("token", "");
}
const initialState = {
loading:false,
errorMessage: "",
success:false,
isLoggedIn: isValid
};
const loginReducer = (state = initialState, action) => {
switch (action.type) {
case ATTEMPT_LOGIN_BEGIN:
return {
...state,
loading:true,
errorMessage:""
};
case ATTEMPT_LOGIN_SUCCESS:
return {
...state,
loading:false,
success:true,
token:action.payload
};
case ATTEMPT_LOGIN_FAIL:
return {
...state,
loading:false,
errorMessage:action.payload
};
default:
return state;
}
};
export default loginReducer;
我觉得可能有一个更好的放置逻辑的位置,但是我还没有在网上找到一个好的答案。
我更喜欢您的中间件模式,但更加集中:
NOTE:这是有根据的,只是一个示例草图
// middleware.js
import {
INIT_SESSION, ATTEMPT_LOGIN_BEGIN, ATTEMPT_LOGIN_FAIL, ATTEMPT_LOGIN_SUCCESS, LOGOUT
} from "../dataTypes/login";
import authenticateToken from "./authenticateToken";
const jwtHandler = store => next => action => {
switch(action.type){
// INIT_SESSION handled only here not in any reducer
case INIT_SESSION:
const token = localStorage.getItem("token");
const isValid = authenticateToken(token);
if(valid){
store.dispatch({type:ATTEMPT_LOGIN_SUCCESS, payload: token});
} else {
localStorage.removeItem("token");
}
break;
case ATTEMPT_LOGIN_SUCCESS:
const newToken = action.payload;
localStorage.setItem("token", newToken);
break;
case LOGOUT:
localStorage.removeItem("token");
break;
default:
}
return next(action);
}
export default jwtHandler;
// index.js
const store = createStore();
store.dispatch({type: INIT_SESSION});
ReactDOM.render(<Provider store={store}>//...
// reducer.js stays clean...
您可以在减速器中执行
const INITIAL_STATE = {
// ...data
loading:false,
token: localStorage.getItem("token"),
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case ATTEMPT_LOGIN_BEGIN:
return {
...state,
loading: true,
};
case ATTEMPT_LOGIN_SUCCESS:
localStorage.setItem("token", action.payload.token);
return {
...state,
loading: false,
token: action.payload.token,
};
case ATTEMPT_LOGIN_FAILURE:
localStorage.removeItem("token");
return {
...state,
loading: false,
token: null,
};
}
}