就无状态前端客户端而言，这种JWT逻辑的安全性如何

我认为我的确切设置对这个问题来说并不重要，但我只是在我的React和React Native应用程序中注意到了这一点，并突然意识到他们实际上并没有检查存储的JWT的任何有效性。

这是代码：

const tokenOnLoad = localStorage.getItem('token')
if (tokenOnLoad) store.dispatch({ type: AUTH_USER })

这可能不是一个真正的问题，因为令牌附在头上，服务器会忽略任何没有有效令牌的请求，但我有没有办法升级它，使其更好(即：更安全，加载由于令牌格式错误或有人在自己的'token'中被黑客入侵而引爆的UI的机会更小)？

以下是附加到每个请求的令牌：

networkInterface.use([{
applyMiddleware(req, next) {
if (!req.options.headers) req.options.headers = {}
const token = localStorage.getItem('token')
req.options.headers.authorization = token || null
next()
}
}])

我应该添加一些逻辑来至少检查令牌的长度，还是对其进行解码并检查其中是否有用户id？或者，服务器这样做是在浪费CPU和时间吗？

我只是想看看是否有任何低成本的方法来进一步验证代币并加固应用程序。

我还使用了一个requireAuth()高级组件，如果用户没有登录，它会把他们踢出去。我觉得如果应用程序以某种方式使用localStorage.setItem('token', 'lkjashkjdf')，可能会有一些糟糕的用户体验。

您的解决方案不是最优的，因为您说过您没有真正检查用户令牌的有效性。

让我详细介绍一下如何处理：

1.在开始时检查令牌

等待redux-persist完成在Provider组件中的加载和注入
将登录组件设置为所有其他组件的父组件
检查令牌是否仍然有效3.1.是：显示孩子3.2.否：显示登录表单

2.当用户当前正在使用应用程序时

您应该使用中间件的强大功能，并在用户制作的每个dispatch中检查令牌的有效性。

如果令牌已过期，则调度一个操作以使令牌无效。否则，继续，就好像什么都没发生一样。

看看下面的中间件token.js。

我写了一个完整的代码样本供您使用，并在需要时对其进行调整。

我在下面提出的解决方案与路由器无关。如果您使用react-router，也可以与任何其他路由器一起使用。

应用程序入口点：App.js

查看Login组件在路由器的顶部

import React from 'react';
import { Provider } from 'react-redux';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import createRoutes from './routes'; // Contains the routes
import { initStore, persistReduxStore } from './store';
import { appExample } from './container/reducers';
import Login from './views/login';
const store = initStore(appExample);
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { rehydrated: false };
}
componentWillMount() {
persistReduxStore(store)(() => this.setState({ rehydrated: true }));
}
render() {
const history = syncHistoryWithStore(browserHistory, store);
return (
<Provider store={store}>
<Login>
{createRoutes(history)}
</Login>
</Provider>
);
}
}

store.js

这里要记住的关键是使用redux-persist并将登录reducer保存在本地存储(或任何存储)中。

import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import localForage from 'localforage';
import { routerReducer } from 'react-router-redux';
import reducers from './container/reducers';
import middlewares from './middlewares';
const reducer = combineReducers({
...reducers,
routing: routerReducer,
});
export const initStore = (state) => {
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
{},
composeEnhancers(
applyMiddleware(...middlewares),
autoRehydrate(),
),
);
persistStore(store, {
storage: localForage,
whitelist: ['login'],
});
return store;
};
export const persistReduxStore = store => (callback) => {
return persistStore(store, {
storage: localForage,
whitelist: ['login'],
}, callback);
};

中间件：token.js

这是一个需要添加的中间件，用于检查令牌是否仍然有效。

如果令牌不再有效，则触发调度使其无效。

import jwtDecode from 'jwt-decode';
import isAfter from 'date-fns/is_after';
import * as actions from '../container/actions';
export default function checkToken({ dispatch, getState }) {
return next => (action) => {
const login = getState().login;
if (!login.isInvalidated) {
const exp = new Date(jwtDecode(login.token).exp * 1000);
if (isAfter(new Date(), exp)) {
setTimeout(() => dispatch(actions.invalidateToken()), 0);
}
}
return next(action);
};
}

登录组件

这里最重要的是if (!login.isInvalidated)的测试。

如果登录数据没有失效，则表示用户已连接，并且令牌仍然有效。(否则会被中间件token.js作废)

import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../../container/actions';
const Login = (props) => {
const {
dispatch,
login,
children,
} = props;
if (!login.isInvalidated) {
return <div>children</div>;
}
return (
<form onSubmit={(event) => {
dispatch(actions.submitLogin(login.values));
event.preventDefault();
}}>
<input
value={login.values.email}
onChange={event => dispatch({ type: 'setLoginValues', values: { email: event.target.value } })}
/>
<input
value={login.values.password}
onChange={event => dispatch({ type: 'setLoginValues', values: { password: event.target.value } })}
/>
<button>Login</button>
</form>
);
};
const mapStateToProps = (reducers) => {
return {
login: reducers.login,
};
};
export default connect(mapStateToProps)(Login);

登录操作

export function submitLogin(values) {
return (dispatch, getState) => {
dispatch({ type: 'readLogin' });
return fetch({}) // !!! Call your API with the login & password !!!
.then((result) => {
dispatch(setToken(result));
setUserToken(result.token);
})
.catch(error => dispatch(addLoginError(error)));
};
}
export function setToken(result) {
return {
type: 'setToken',
...result,
};
}
export function addLoginError(error) {
return {
type: 'addLoginError',
error,
};
}
export function setLoginValues(values) {
return {
type: 'setLoginValues',
values,
};
}
export function setLoginErrors(errors) {
return {
type: 'setLoginErrors',
errors,
};
}
export function invalidateToken() {
return {
type: 'invalidateToken',
};
}

登录减少程序

import { combineReducers } from 'redux';
import assign from 'lodash/assign';
import jwtDecode from 'jwt-decode';
export default combineReducers({
isInvalidated,
isFetching,
token,
tokenExpires,
userId,
values,
errors,
});
function isInvalidated(state = true, action) {
switch (action.type) {
case 'readLogin':
case 'invalidateToken':
return true;
case 'setToken':
return false;
default:
return state;
}
}
function isFetching(state = false, action) {
switch (action.type) {
case 'readLogin':
return true;
case 'setToken':
return false;
default:
return state;
}
}
export function values(state = {}, action) {
switch (action.type) {
case 'resetLoginValues':
case 'invalidateToken':
return {};
case 'setLoginValues':
return assign({}, state, action.values);
default:
return state;
}
}
export function token(state = null, action) {
switch (action.type) {
case 'invalidateToken':
return null;
case 'setToken':
return action.token;
default:
return state;
}
}
export function userId(state = null, action) {
switch (action.type) {
case 'invalidateToken':
return null;
case 'setToken': {
const { user_id } = jwtDecode(action.token);
return user_id;
}
default:
return state;
}
}
export function tokenExpires(state = null, action) {
switch (action.type) {
case 'invalidateToken':
return null;
case 'setToken':
return action.expire;
default:
return state;
}
}
export function errors(state = [], action) {
switch (action.type) {
case 'addLoginError':
return [
...state,
action.error,
];
case 'setToken':
return state.length > 0 ? [] : state;
default:
return state;
}
}

请随意问我任何问题，或者如果你需要我解释更多关于哲学的内容。

相关内容

最新更新

热门标签：