Primeiras aulas do curso VueJS: Protegendo recursos com autenticação e VueX

VueJS: Protegendo recursos com autenticação e VueX

Registrando usuários - Introdução

Boas vindas ao curso de Autenticação com Vue e Vuex, sou Vinicíus Neves e serei seu instrutor nesta jornada. Lembre-se que o pré-requisito é o curso de "Vue.js parte 2: construindo Single Page Applications".

Nosso objetivo é implementar autenticação de forma gradativa, assim poderemos explorar todas as etapas do processo de login e logout do usuário em uma aplicação view.

O foco principal é o controle de acesso dos usuários desde o cadastro até o login no back-end, em que obteremos o token de segurança para realizar requisições nas rotas seguras da API. Para isso, utilizaremos as bibliotecas auxiliares do view no decorrer do curso.

Veremos:

Vamos começar?

Registrando usuários - Criando o componente de cadastro de usuário

No decorrer destes curso implementaremos autenticações do usuário na aplicação do ByteBank. Estamos falando de uma aplicação já existente, que responde na porta 8080.

No atual estado, conseguimos acessar a listagem dos gerentes e qual agência cada um atende. Nossa primeira tarefa será disponibilizar o cadastro dos usuários. Escolheremos um editor de código, neste curso será usado o Visual Studio Code. Além de instalar o editor na máquina, recomenda-se a instalação da extensão "Verturing", pois ela irá realizar um destaque na sintaxe do viewjs.

Com o editor aberto, criaremos nossa página de login. Nosso arquivo será NovoUsuario.vue. Começaremos com a tag <template> que englobará nosso componente.

</template>
    <h1>Novo Usuário</h1>
<template>

Precisaremos indetificar para o view que determinado caminho da url será exibido esse conteúdo. Em inde.js faremos essa definição de rota: path:'/cadastre-se'. O nome das rotas deve ser único, e posteriormente discutiremos porquê esse padrão nos oferece vantagens.

{ 
path: '/cadastre-se',
name: 'novo.usuario',
component: NovoUsuario
} 

Feito isso, devemos importar o componente. Ao acessarmos a url correspondente no navegador, já veremos o conteúdo novo usuário sendo exibido como o esperado.

Registrando usuários - Evoluindo o componente de cadastro de usuário

Nesta aula, evoluiremos nosso componente de cadastro do usuário e implementaremos o comportamento esperado a ele. Precisaremos definir uma forma do usuário acessar a página de cadastro, incluir seus dados no formulário e então finalizar o registro na aplicação.

Começaremos pelo formulário, e neste momento não deveremos nos preocupar com o nome das classes CSS que serão utilizadas nem com a estrutura html, afinal todas essas informações são provenientes do Bootstrap, e isso não é nosso foco no momento.

Em NovoUsuario.vue, inseriremos uma <div>, que abrigará uma labels e inputs do tipo texto.email e password para "Nome", "Email" e "Senha", na classe container, além do botão "salvar". É importante que ao criarmos um componente encapsulemos todo nosso html e exportar apenas um elemento, caso o contrário teremos erros no código.

Uma vez que definimos o html do nosso componente, precisamos dar vida a ele. Então faremos uma conexão desses inputs

<template>
    <div class="container">
        <h1>Novo Usuario</h1>
        <form>
            <div class="form.group">
                <label for="nome">Nome</label>
                <input type="text" class="form-control">
            </div>
            <div class="form.group">
                <label for="email">E-mail</label>
                <input type="email" class="form-control">
            </div>
            <div class="form.group">
                <label for="senha">Senha</label>
                <input type="password" class="form-control">
            </div>
            <button class="btn btn-primary" type="submit">Salvar</button>
        </form>
    </div>
</template> 

A tag <template> terá todo o visual do nosso componente, e então criaremos também a tag <script> em que exportaremos o objeto que terá todas as configurações do componente.

A primeira configuração que faremos diz respeito aos dados. Queremos que sempre que o componente for renderizado os dados únicos não se misturem com o restante da aplicação.

<script>
export default {

  data: function() {
    return {
      usuario: {
        nome: "",
        senha: "",
        email: ""
      }
    }
  },
</script>

Precisaremos fazer a conexão entre os inputs e as propriedades do objeto, faremos isso por meio do v-model, como no padrão abaixo que se repetirá em todos os inputs do formulário:

<div class="form.group">
                <label for="nome">Nome</label>
                <input type="text" class="form-control">v-model="usuario.nome">
            </div>

Uma vez que a ligação foi realizada, realizaremos a submissão do formulário. Na tag <form> trataremos o submit e evitaremos que o formulário tenha o comportamento padrão do html 5, que é enviar os dados e recarregar a página. Para tanto escreveremos .prevent. E então adicionaremos a função enviarformulario.

<template>
  <div class="container">
    <h1>Novo usuário</h1>
    <form @submit.prevent="enviarFormulario">
      <div class="form-group">
        <label for="nome">Nome</label>
        <input type="text" class="form-control" v-model="usuario.nome" />
      </div>

Feito isso, implementaremos a função, assim como fizemos com nosso objeto de dados. Na nova sintaxe do ecma não precisamos mais explicitar que se trata de uma função.

<script>
export default {

  data: function() {
    return {
      usuario: {
        nome: "",
        senha: "",
        email: ""
      }
    }
  },
  methods: {
    enviarFormulario () {
        console.log(this.usuario)
    }
}
</script>

Ao preenchermos o formulário que criamos no navegador, veremos que os dados são enviados para o local esperado, e então temos acesso às propriedades nome, e-mail e senha.

Com o formulário funcional, podemos começar a enviar os dados para o backend.

Sobre o curso VueJS: Protegendo recursos com autenticação e VueX

O curso VueJS: Protegendo recursos com autenticação e VueX possui 111 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de Frameworks MVC em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Frameworks MVC acessando integralmente esse e outros cursos, comece hoje!

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas