tldr;

Aqui está o código-fonte: https://github.com/cleechtech/react-jwt-starter

Hoje vamos desenvolver um tutorial anterior que garantiu um aplicativo MEAN stack com Json Web Tokens. Para os não iniciados, os JWT são como cookies de navegador da web, mas melhores. Usaremos o mesmo código, mas trocaremos React.js por Angular.js.

Clone o exemplo MEAN e exclua angular ou clone diretamente deste commit.

Instale as dependências do lado do servidor e inicie o servidor:

$ npm i
$ node server

Você não verá nada http://localhost:3000/.

Adicionar React.js

Adicione esses scripts ao final de :public/index.html

<script src="https://fb.me/react-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>

Uma ferramenta popular para aplicativos React.js é o webpack, que é semelhante a uma combinação de gulp.js e browserify. Ele empacota tudo e permite que você use a sintaxe commonJS, ou seja, no navegador. É legal, mas não vamos usá-lo neste tutorial.require()

Vamos usar babel.js para o ES6 goodness e não requer configuração nossa.

Adicionar tag de script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

Faça uma pasta e adicione alguns arquivos js:public/components/

<script type="text/babel" src='components/register.js'></script>
  <script type="text/babel" src='components/login.js'></script>

Precisamos do ou não funcionará.type="text/babel"

Primeiro componente

Adicione um div a :public/index.html

<div id='registerForm'></div>

var RegisterForm = React.createClass({
    render(){
        return (
            <h1>Hello react</h1>
        );
    }
});

ReactDOM.render(<RegisterForm />, document.getElementById('registerForm'));

Essa sintaxe funky . Não precisamos dele, mas muitos exemplos o usam. Os colchetes de seta em torno de RegisterForm são JSX. Depois, há seu velho amigo , vanilla javascript que diz ao React onde montar o componente no DOM.render(){}getElementById

Na verdade, queremos um formulário, não um h1:

var RegisterForm = React.createClass({
    render(){
        return (
            <form>
                <input type='email' placeholder='Email address' className='form-control' />
                <input type='password'  placeholder='Password' className='form-control' />
                <input type='submit' className='btn btn-primary' value='Register' />
            </form>
        );
    }
});

ReactDOM.render(<RegisterForm />, document.getElementById('registerForm'));

No JSX, existem pequenas diferenças, use em classNamevez de class. (classe é uma palavra reservada em javascripts).

Envie o formulário de registro

Portanto, este é um formulário de registro estático. Agora vamos adicionar um método personalizado a este componente para lidar com o envio do formulário. Isso é tirado quase literalmente do tutorial de introdução do Facebook , onde está em “Adicionando novos comentários”.

var RegisterForm = React.createClass({
    handleSubmit: function(e) {
        e.preventDefault();

        var author = this.refs.email.value.trim();
        var text = this.refs.password.value.trim();

        // form validation goes here
        if (!text || !author) {
          return;
        }

        console.log('form submitted!');
        // TODO: send request to the server
        this.refs.email.value = '';
        this.refs.password.value = '';
        return;
    },
    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <input type='email' ref='email' placeholder='Email address' className='form-control' />
                <input type='password' ref='password' placeholder='Password' className='form-control' />
                <input type='submit' className='btn btn-primary' value='Register' />
            </form>
        );
    }
});

ReactDOM.render(<RegisterForm />, document.getElementById('registerForm'));

Usaremos jQuery para enviar o formulário ao nosso servidor:

// send request to the server
$.ajax({
    type: "POST",
    dataType: 'json',
    url: '/api/users',
    data: {
        email: _email,
        password: _password
    },
    success: function(data) {
        console.log('data');
    }.bind(this),
    error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
    }.bind(this)
});

Poderíamos ter usado algo mais leve como axios .

Finalmente decodifique o token para obter informações com jwt-decode

success: function(data) {
    console.log('data');
    var _token = data.token;
    var _decoded = jwt_decode(_token);

    // decoded data from our JSON web token
    console.log(_decoded);
}.bind(this),

Questões? Me bate no Twitter

Dê uma olhada no CÓDIGO FONTE