Formulário de login

Boa tarde.

Você pode seguir a mesma estratégia que aprendeu no curso de Angular quando capturados os dados do cadastro de fotos e as enviamos para o backend. É a mesma coisa, só os dados mudam. No lugar dos dados da foto, você pegará os dados do usuário. Mas parece que você não chegou ainda nessa parte do curso. né? Sugiro avançar para consolidar bem essa parte.

A parte da API do seu backend tem que estar preparada para receber os dados. Como essa parte é de backend e não de front, fica de fora do curso de Angular. Porém a Alura possui cursos em mais de uma linguagem para criação de API's. Dá uma conferida depois.

Eu estou utilizando o back-end do curso de MEAN aqui do Alura, so troquei as entidades e seus atributos.

O meu service está assim:

logar(usuario: UsuarioComponent): Promise<any> {
    return this.http.post(this.url, JSON.stringify(usuario))
      .toPromise()
        .then( res => {
          var token = res.headers.get('x-access-token');
                    if (token) {
                        this._loggedIn.next(true);
                        localStorage.setItem('token', token);
                    }
        })
        .catch( err => console.log(err))
  }

Recebe o usuário, grava um token no localStorage. Nada complicado de mais. O meu formulario chama o logar() que chama esse logar() do service.

Eu estou recebendo o seguinte erro:

      { MongooseError: Path `login` is required.
          at ValidatorError (C:\GitHub\eSports-team\Back\node_modules\mongoose\lib\error\validator.js:24:11)
          at validate (C:\GitHub\eSports-team\Back\node_modules\mongoose\lib\schematype.js:705:13)
          at C:\GitHub\eSports-team\Back\node_modules\mongoose\lib\schematype.js:750:9
          at Array.forEach (native)
          at SchemaString.SchemaType.doValidate (C:\GitHub\eSports-team\Back\node_modules\mongoose\lib\schematype.js:711:19)
          at C:\GitHub\eSports-team\Back\node_modules\mongoose\lib\document.js:1408:9
          at _combinedTickCallback (internal/process/next_tick.js:73:7)
          at process._tickCallback (internal/process/next_tick.js:104:9)
        message: 'Path `login` is required.',
        name: 'ValidatorError',
        properties: [Object],
        kind: 'required',
        path: 'login',
        value: undefined,
        reason: undefined } },
  message: 'Usuario validation failed',
  name: 'ValidationError' }

Pelo que eu entendi, os dados do formulário não estão chegando no meu service. Então acredito que o problema esta na definição do formulário.

Estou debugando um pouco mais, encontrei aonde esta o problema.

Alterei o seguinte:

Logar do componente:

logar(){

      this.service.logar(this.usuario)
        .then( res => {
          console.log('Logando...')
        })
        .catch(erro => {
          console.log('deu erro: ' + erro)
        })

  }

Logar do service:

logar(usuario: UsuarioComponent): Promise<any> {
    return this.http.post(this.url, JSON.stringify(usuario))
      .toPromise()
        .then( res => {
          console.log('chegou no service!')
          var token = res.headers.get('x-access-token');
                    if (token) {
                        this._loggedIn.next(true);
                        localStorage.setItem('token', token);
                    }
        })
        .catch( err => {
          console.log('deu erro no service')
          console.log(err)
        })
  }

Ele esta imprimindo 'deu erro no service' e o seguinte:

XMLHttpRequest cannot load http://localhost:3000/api/usuarios. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Seu backend precisa habilitar CORS no seu backend:

npm install cors --save

Vai onde você carrega os middlewares e faça

const  cors = require('cors');
// código omitido 

// ative como primeiro middleware de todos
app.use(cors());

Você precisa disso porque o navegador não aceita fazer requisição para um endereço diferente da origem da sua página e o seu servidor tem que autorizar. Dá uma estuda sobre CORS para ficar mais ciente da situação.

Vou dar uma olhada, retorno no tópico se esse for o problema.

Consegui resolver o problema do cors, agora estou com um problema ao tentar realizar a autenticação.

Recebo o seguinte erro:

POST http://localhost:3000/api/auth/autenticar 401 (Unauthorized)

Response {_body: "Unauthorized", status: 401, ok: false, statusText: "Unauthorized", headers: Headers, …}

Eu estou utilizando a autenticação que um outro aluno aqui da Alura sugeriu: https://cursos.alura.com.br/forum/topico-adicionando-token-em-toda-requisao-com-angular-2-solucao-27821

Eu recebo o erro aqui:

private catchAuthError (self: HttpService) {
    // we have to pass HttpService's own instance here as `self`
    return (res: Response) => {
      console.log(res);
      if (res.status === 401 || res.status === 403) {
        // if not authenticated
        console.log(res);
      }
      return Observable.throw(res);
    };
  }