反应认证流程验证

Question

我在 nodejs 中有一些 API 和客户端的 React 应用程序。我尝试使用 jwt 令牌为我的 API/后台创建身份验证系统，我使用 jsonwebtoken 在服务器端创建和验证令牌，但我对客户端有一些疑问......现在登录时我将令牌保存在 localstorage ，然后使用 React-Router“onUpdate”检查本地存储是否有令牌，如果没有，我将重定向到登录，否则不附加任何内容，然后在我的应用程序上为每个 ajax 请求附加一个身份验证标头。

这是我的路由器

export const isLoggedIn = (nextState, replace) => {
    console.log(localStorage.getItem('id_token'));
}
<Router history={browserHistory} onUpdate={isLoggedIn} >
    <Route path="/" component={App}>
        <IndexRoute component={Login.Login} />
        <Route path="admin/" component={Dashboard} />
        <Route path="admin/tutti" component={Users} />
    </Route>
</Router>

我在这里登录

$.get('/login',credential, function (result) {
    localStorage.setItem('id_token', result.token)
});

通用请求：

$.ajax({
    url:"/api/users",
    type:'GET',
    contentType: "application/json",
    success:function (result) {},
    headers: {"x-access-token": localStorage.getItem('id_token')}
});

这是管理 React 身份验证流程的正确方法吗？ 我的疑问是，在 isLoggedIn 上我需要以某种方式验证令牌吗？

非常感谢！

Answer 1

你知道Higher Order Components吗？

这是一篇关于 HOC 的文章：https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.hb4ck2u52

React 身份验证流程可以写成 HOC。

例如：

import React, { Component, PropTypes } from 'react';

export default function (ComposedComponent) {
  class Auth extends Component {
    componentWillMount() {
      const isLoggedIn = .... // your way to check if current user is logged in
      if (!isLoggedIn) {
        browserHistory.push('/'); // if not logged in, redirect to your login page
      }
    }
    render() {
      return <ComposedComponent {...this.props} />;
    }
  }
  return Auth;
}

但我建议你使用 FLUX 流，例如 Redux，并将你的状态存储在 Redux 存储中。

这是我的 Redux 实现：

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';

export default function (ComposedComponent) {
  class Auth extends Component {
    componentWillMount() {
      if (!this.props.isLoggedIn) {
        browserHistory.push('/login');
      }
    }
    componentWillUpdate(nextProps) {
      if (!nextProps.isLoggedIn) {
        browserHistory.push('/login');
      }
    }
    render() {
      return <ComposedComponent {...this.props} />;
    }
  }
  Auth.propTypes = {
    isLoggedIn: PropTypes.bool.isRequired,
  };
  function mapStateToProps(state) {
    return { isLoggedIn: state.userReducer.isLoggedIn };
  }
  return connect(mapStateToProps)(Auth);
}

用法：

import auth from '/path/to/HOC/Auth';

<Router history={browserHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Login.Login} />
        <Route path="admin/" component={auth(Dashboard)} /> // wrap components supported to be protected
        <Route path="admin/tutti" component={auth(Users)} />
    </Route>
</Router>