Question

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

以下是代码：

const tokenOnLoad = localStorage.getItem('token')

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

它可能不是真正的问题，因为令牌附加到标头，服务器将忽略没有有效令牌的任何请求，但有没有办法我可以升级它更好（即：更多加载由于格式错误的令牌引爆的用户界面或者有人在自己的'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()
  }
}])

我应该添加一些逻辑来至少检查令牌的长度或解码它并检查它是否有用户ID？或者，当服务器执行此操作时是浪费CPU和时间吗？

我只想查看是否有任何低成本方法可以进一步验证令牌并加强应用。

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

Answer 1

您的解决方案并非最佳，因为您声明并未真正检查用户令牌的有效性。

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

<强> 1。在开始时检查令牌

等待redux-persist完成加载并注入Provider组件
将Login组件设置为所有其他组件的父组件
检查令牌是否仍然有效 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;
  }
}

随时问我任何问题，或者你是否需要我解释更多有关哲学的内容。

就无状态前端客户端而言，这种JWT逻辑有多安全？

1 个答案: