gpt4 book ai didi

javascript - 就无状态前端客户端而言,这个 JWT 逻辑有多安全?

转载 作者:行者123 更新时间:2023-11-29 23:31:45 24 4
gpt4 key购买 nike

我认为我的确切设置是什么对于这个问题的目的并不重要,但我只是在我的 React 和 React Native 应用程序中注意到这一点,然后突然意识到它们实际上并没有检查 JWT 的任何类型的有效性已存储。

代码如下:

const tokenOnLoad = localStorage.getItem('token')

if (tokenOnLoad) store.dispatch({ type: AUTH_USER })

这可能不是真正的问题,因为 token 附加到 header ,服务器将忽略任何没有有效 token 的请求,但有没有办法我可以将其升级为更好(即:更安全 && 更少机会加载 UI 由于 token 格式错误或有人入侵他们自己的 'token') 而引爆?

这是附加到每个请求的 token :

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

我是否应该添加一些逻辑来至少检查 token 的长度或对其进行解码并检查其中是否包含用户 ID?或者,服务器这样做是否浪费 CPU 和时间?

我只是想看看是否有任何低成本的方法来进一步验证 token 并强化应用程序。

我也确实使用了一个 requireAuth() 高阶组件,如果用户没有登录,它会将用户踢出。我觉得如果应用以某种方式登录,可能会有一些糟糕的用户体验 localStorage.setItem(' token ',
'lkjashkjdf')
.

最佳答案

您的解决方案不是最佳的,因为您说您并没有真正检查用户 token 的有效性。

让我详细说明您可以如何处理它:

<强>1。在开始时检查 token

  1. 等待redux-persist加载完成并注入(inject)Provider组件
  2. 将登录组件设置为所有其他组件的父组件
  3. 检查 token 是否仍然有效3.1.是:显示 child 3.2.否:显示登录表单

<强>2。当用户当前正在使用该应用程序时

您应该使用中间件的强大功能,并在用户进行的每个 dispatch 中检查 token 有效性。

如果 token 已过期,则派发一个操作使 token 无效。否则,就当什么都没发生一样继续。

看看下面的中间件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

这是为了检查 token 是否仍然有效而添加的中间件。

如果 token 不再有效,则会触发调度以使其无效。

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仍然有效。 (否则它会被中间件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',
};
}

登录 reducer

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;
}
}

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

关于javascript - 就无状态前端客户端而言,这个 JWT 逻辑有多安全?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47063287/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com