Question

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

这是我的路由器

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 auth流的正确方法吗？我的疑问是，在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>

反应认证流程验证

1 个答案: