Prova LP2 - Aplicacao Vue

Aplicacao desenvolvida com Vue 3, Vite e Vue Router. O projeto possui menu horizontal, consulta de CNPJ, listagem de produtos, tela de login e uma area administrativa protegida por middleware.

O Que A Aplicacao Faz

Esta aplicacao demonstra uma estrutura simples de SPA com rotas:

• Inicio: tela inicial com atalhos para as principais funcionalidades.
• Consultas > Consultar CNPJ: tela que consulta dados de uma empresa usando a BrasilAPI.
• Produtos: tela com uma lista visual de produtos.
• Admin: tela protegida, acessivel apenas depois do login.
• Login: tela para autenticar o usuario antes de acessar a area administrativa.

O visual foi mantido simples: sem sombras, sem animacoes, poucas cores e apenas bordas leves para organizar as secoes.

Tecnologias Usadas

• Vue 3
• Vite
• Vue Router
• JavaScript
• CSS
• BrasilAPI para consulta de CNPJ

Como Rodar O Projeto

Instale as dependencias:

npm install

Inicie o servidor de desenvolvimento:

npm run dev

Gere a versao final de producao:

npm run build

Login De Teste

Para acessar a rota protegida Admin, use:

Usuario: admin
Senha: 123456

Quando o login e feito com sucesso, a aplicacao salva no localStorage:

usuarioLogado=true
usuarioNome=admin

Quando o usuario clica em Sair, esses dados sao removidos do localStorage.

Estrutura Principal

src/
  App.vue
  main.js
  assets/
    base.css
    main.css
  middleware/
    auth.js
  router/
    index.js
  views/
    HomeView.vue
    consult-cnpj.vue
    produtos.vue
    login.vue
    admin.vue

App.vue

O arquivo src/App.vue e o componente principal da aplicacao.

Ele e responsavel por:

• montar o topo da pagina;
• exibir a marca Prova LP2;
• mostrar o menu horizontal;
• esconder o item Login quando o usuario esta logado;
• mostrar o botao Sair quando o usuario esta logado;
• renderizar a rota atual com <RouterView />.

O menu e criado a partir do array itensMenu:

const itensMenu = [
  { label: 'Inicio', to: '/', descricao: 'Painel principal' },
  {
    label: 'Consultas',
    descricao: 'Ferramentas de busca',
    children: [
      { label: 'Consultar CNPJ', to: '/consultcnpj', descricao: 'Dados cadastrais' }
    ]
  },
  { label: 'Produtos', to: '/produtos', descricao: 'Catalogo' },
  { label: 'Admin', to: '/admin', descricao: 'Area protegida' },
  { label: 'Login', to: '/login', descricao: 'Acessar', ocultarLogado: true }
]

O item Consultas possui um submenu com a opcao Consultar CNPJ.

Router

As rotas ficam em src/router/index.js.

Rotas cadastradas:

/
/consultcnpj
/produtos
/login
/admin

A rota /admin possui uma configuracao especial:

meta: {
  requiresAuth: true
}

Essa propriedade informa ao middleware que a rota precisa de login.

Middleware

O middleware fica em src/middleware/auth.js.

Ele verifica se a rota acessada exige autenticacao:

const precisaLogin = to.meta?.requiresAuth

Depois verifica se o usuario esta logado:

const usuarioLogado = localStorage.getItem('usuarioLogado') === 'true'

Se a rota exigir login e o usuario nao estiver logado, ele redireciona para /login:

return {
  path: '/login',
  query: {
    redirect: to.fullPath
  }
}

Esse redirect guarda a pagina que o usuario tentou acessar. Assim, depois do login, ele pode ser enviado diretamente para a rota original.

O middleware e aplicado no router com:

router.beforeEach((to) => authMiddleware(to))

Isso significa que antes de cada troca de pagina o Vue Router chama o middleware.

Tela De Login

Arquivo: src/views/login.vue

Essa tela possui:

• campo de usuario;
• campo de senha;
• mensagem de erro;
• botao Entrar;
• informacao com usuario e senha de teste.

O login e validado de forma simples:

if (usuario.value === 'admin' && senha.value === '123456') {
  localStorage.setItem('usuarioLogado', 'true')
  localStorage.setItem('usuarioNome', usuario.value)
  router.push(destino.value)
}

Se os dados estiverem corretos, o usuario e redirecionado para a rota protegida.

Se estiverem errados, a tela mostra:

Usuario ou senha incorretos.

Tela Admin

Arquivo: src/views/admin.vue

Essa tela representa uma area protegida.

Ela so pode ser acessada quando:

localStorage.usuarioLogado = true

Se o usuario tentar acessar /admin sem login, o middleware redireciona para /login.

Tela De Consulta CNPJ

Arquivo: src/views/consult-cnpj.vue

Essa tela permite consultar dados de uma empresa pelo CNPJ.

Ela usa a API:

https://brasilapi.com.br/api/cnpj/v1/{cnpj}

Fluxo da consulta:

1. O usuario digita o CNPJ.
2. O codigo remove caracteres que nao sao numeros.
3. O sistema verifica se o CNPJ possui 14 digitos.
4. A aplicacao faz uma requisicao fetch para a BrasilAPI.
5. Se encontrar a empresa, mostra os dados na tela.
6. Se nao encontrar, mostra uma mensagem de erro.

Dados exibidos:

• razao social;
• nome fantasia;
• CNPJ;
• cidade;
• UF;
• situacao cadastral;
• natureza juridica.

Tela De Produtos

Arquivo: src/views/produtos.vue

Essa tela mostra uma lista fixa de produtos.

Cada produto possui:

• codigo;
• nome;
• categoria;
• descricao;
• preco;
• quantidade em estoque.

Os produtos sao exibidos em cards simples, organizados em grid responsivo.

CSS

Os estilos principais ficam em:

src/assets/main.css

O CSS foi simplificado para usar:

• poucas cores;
• bordas simples;
• sem sombras;
• sem animacoes;
• sem transicoes;
• layout limpo e direto.

O arquivo src/assets/base.css contem a base original do projeto Vue, com reset e configuracoes globais.

main.js

Arquivo: src/main.js

Esse arquivo inicializa a aplicacao:

createApp(App).use(router).mount('#app')

Ele importa:

• o CSS principal;
• o componente App.vue;
• o router.

Depois monta tudo no elemento:

<div id="app"></div>

Resumo Do Fluxo De Autenticacao

1. Usuario tenta acessar /admin.
2. Router chama o middleware.
3. Middleware verifica meta.requiresAuth.
4. Middleware verifica localStorage.usuarioLogado.
5. Se nao estiver logado, redireciona para /login.
6. Usuario informa admin e 123456.
7. Login salva os dados no localStorage.
8. Usuario e enviado para /admin.
9. Botao Sair remove os dados do localStorage.

Observacao

Este projeto usa uma autenticacao simples apenas para exemplo academico. Em uma aplicacao real, o login deveria ser validado em um backend, usando token, sessao ou outro mecanismo seguro.