Importe também [`axios`](https://github.com/axios/axios) para poder enviar uma solicitação HTTP para o servidor:

 import axios from 'axios'

Antes de prosseguirmos, precisaremos adicionar algumas regras ao banco de dados para podermos validar o email como deveríamos, conforme visto abaixo:

 "read" = "true"

O que significa que o banco de dados pode ser lido sem qualquer impedimento do lado do cliente.

 "write" = "auth" !== null

Você não pode escrever no banco de dados, exceto se for um usuário autenticado.

 "Users" = { "onIndex" : ["email"] }

Isso nos permite consultar o documento `users` com um índice de `email`. Ou seja, você pode literalmente filtrar o banco de dados para um e-mail exclusivo. Em seguida, adicione uma propriedade computada personalizada com o nome `validations` assim como temos métodos, computados, etc. Em `validations` teremos métodos para validar os dados necessários a partir de `email` onde é obrigatório e obviamente deve ser um email . Além disso, queremos ser capazes de dizer a um usuário quando um email já foi recebido por outra pessoa, verificando o banco de dados após o usuário digitá-lo usando algo chamado validadores assíncronos, tudo dentro de um validador personalizado e tudo suportado por [vuelidate. ](https://vuelidate.js.org/#sub-asynchronous-validation) Em seguida, em unique, consulte o banco de dados usando axios e use o Object.keys padrão para retornar a resposta apenas se seu comprimento for 0. Para a idade, você adicionará um valor obrigatório, numérico e um valor mínimo de 18 que é atribuído a `minVal ` como suas propriedades.

 age: { required, numeric, minVal: minValue(18) }

As propriedades da senha são obrigatórias, com um comprimento mínimo de 6 atribuído a `minLen`.

 password: { required, minLen: minLength(6) }

As propriedades `confirmPassword` são basicamente as mesmas que a senha.

 confirmPassword: { sameAs: sameAs(vm => { return vm.password }) }

Para informar ao usuário que o e-mail foi recebido, use `v-if` para verificar se `unique` é verdadeiro ou falso. Se true, significa que o comprimento do objeto retornado é 0, e o email ainda pode ser usado e vice-versa. Da mesma forma, você pode verificar se a entrada do usuário é um e-mail real usando `v-if`. E para todos os divs circundantes na entrada individual, adicionaremos uma classe de invalid que se tornará ativa quando houver um erro nessa entrada. Para vincular os eventos de validação a cada entrada no HTML, usamos [`$touch()`](https://vuelidate.js.org/#sub-without-v-model) como visto com o `email ` abaixo. `Age`, `password` e `confirmPassword` serão vinculados à sua entrada HTML de maneira semelhante ao `email`. E tornaremos o botão 'Enviar' inativo se houver um erro em qualquer uma das entradas.

 <button type="submit" :disabled="$v.$invalid">create</button>

Aqui está um [exemplo CodePen](https://codepen.io/atanda1/pen/Yzyqrjv) completo para esta seção vuelidate.

## Autenticação Este aplicativo é um SPA e não recarrega como sites tradicionais, então usaremos Vuex, como nossa única "fonte de verdade" para permitir que todos os componentes em nosso aplicativo estejam cientes do status geral de autenticação. Vamos para o nosso arquivo de armazenamento e criamos o método de login/inscrição nas ações. As respostas (`token` e `userId`) recebidas quando enviamos os dados dos usuários, serão armazenadas dentro do nosso estado. Isso é importante porque o token será usado para saber se ainda estamos logados ou não em algum ponto do nosso aplicativo. O `token`, `userId` e o usuário são criados no estado com um valor inicial nulo. Chegaremos ao usuário muito mais tarde, mas, por enquanto, vamos nos concentrar nos dois primeiros.

 state: { idToken: null, userId: null, user: null }

As mutações são então criadas para alterar o estado quando necessário.

authUser	Salva o token e o userId
storeUser	Armazena as informações do usuário
clearAuthData	Apaga os dados de volta ao estado inicial

 mutations: { authUser (state, userData) { state.idToken = userData.token state.userId = userData.userId }, storeUser (state, user) { state.user = user }, clearAuthData (state) { state.idToken = null state.userId = null state.user = null } }

Para inscrição/login, teremos que criar ações individuais para ambos, onde enviamos nossas solicitações de autenticação para o servidor. Depois disso, nossa resposta (token e userId) de inscrição/login é confirmada para authUser e salva no armazenamento local. Mas aqui está a parte complicada, o que faremos com a ação de inscrição em particular é enviar apenas o e-mail e a senha para serem registrados no banco de dados de autenticação. Na verdade, não temos acesso para usar os dados desse banco de dados de autenticação e não enviamos nenhum de nossos dados de inscrição além de e-mail/senha. Então, o que faremos é criar outra ação para enviar os dados de inscrição completos para outro banco de dados. Neste documento de banco de dados separado, teremos acesso completo a todas as informações que escolhermos salvar lá. Chamaremos essa nova ação de `storeUser`. Então vamos para nossa ação de inscrição e despachamos todo o objeto contendo nossos dados de inscrição para um banco de dados ao qual agora temos acesso através de `storeUser`. **Nota:** Você pode não querer enviar a senha do seu usuário com `storeUser` para o banco de dados por motivos de segurança. `storeUser` adiciona uma consulta usando nosso token recém-obtido e a API do banco de dados ao postar no banco de dados. Isso ocorre porque não podemos gravar em nosso banco de dados, exceto que somos autenticados com nossa prova (o token). Essa é a regra que demos ao Firebase no início, lembra?

 “write” = “auth” !== null

O código completo para ações de inscrição/entrada está aqui [aqui](https://codepen.io/atanda1/pen/mdePKqj). Em seguida, envie a inscrição e o login de seus componentes no método `onSubmit` para as respectivas ações na loja.

 methods : { onSubmit () { const signupData = { email : this.email, name : this.name, age : this.age, password : this.password, confirmPassword : this.co nfirmPassword } this.$store.dispatch('signup', signupData) } } }

**Observação:** `signupData` contém os dados do formulário. ## AuthGuard É necessário que o AuthGuard impeça que usuários não logados tenham acesso ao painel para onde enviarão a pesquisa. Acesse o arquivo de rotas e importe nossa loja.

 import store from './store'

Dentro da rota, vá para o caminho do painel e adicione o seguinte:

 const routes = [ { path: '/', component: WelcomePage }, { path: '/signup', component: SignupPage }, { path: '/signin', component: SigninPage }, { path: '/dashboard', component: DashboardPage, beforeEnter (to, from, next) { if (store.state.idToken) { next() } else { next('/signin') } } } ]

Tudo o que isso faz é verificar se há um token no estado, se sim, damos acesso ao painel e vice-versa. ## LogOut Para criar nossa opção de logout, usaremos o `clearAuth` que criamos anteriormente em `mutations` que apenas configura o `token` e o `userId` para `null`. Agora criamos um novo `logout` `action` , que se compromete com `clearAuth`, exclui o armazenamento local e adiciona `router.replace('/')` para redirecionar o usuário completamente.

 actions: { logout ({commit}) { commit('clearAuth') localStorage.removeItem('token') localStorage.removeItem('userId') router.replace('/') } }

No componente de cabeçalho, temos um método `onLogout` que despacha nossa ação de logout na loja.

 methods: { onLogout() { this.$store.dispatch('logout') } }

Em seguida, adicionamos um `@click` ao botão que dispara o método `onLogout` como podemos ver [aqui](https://codepen.io/atanda1/pen/jObqKNd).

 <ul @click="onLogout">Log Out</ul>

## UI_State Agora que concedemos acesso condicional ao painel, a próxima etapa é removê-lo da barra de navegação, para que apenas usuários autenticados possam visualizá-lo. Para fazer isso, adicionaríamos um novo método nos `getters` chamado `ifAuthenticated` que verifica se o token dentro do nosso estado é nulo. Quando há um token, ele mostra que o usuário está autenticado e queremos que ele veja a opção do painel de pesquisa na barra de navegação.

 getters: { isAuthenticated (state) { return state.idToken !== null } }

Depois disso, você volta para o componente de cabeçalho e cria um método `auth` em computado, que despacha para nosso `isAuthenticated` dentro dos `getters` que acabamos de criar na loja. O que isso faz é que `isAuthenticated` retornaria false se não houvesse token, o que significa que `auth` também seria nulo e vice-versa.

 computed: { auth () { return this.$store.getters.ifAuthenticated } }

Depois disso, adicionamos um `v-if` ao nosso HTML para verificar se `auth` é nulo ou não, determinando se essa opção seria exibida na barra de navegação.

 <li v-if='auth'> <router-link to="/dashboard">Dashboard</router-link> </li> <li v-if='!auth'> <router-link to="/signup">Register</router-link> </li> <li v-if='!auth'> <router-link to="/signin">Log In</router-link> </li>

- Você encontrará o código completo da seção UI State [aqui](https://codepen.io/atanda1/pen/QWjNxyo).

Login automático

Quando recarregamos nosso aplicativo, perdemos os dados e somos desconectados, tendo que começar tudo de novo. Isso ocorre porque nosso token e Id são armazenados em Vuex, que é javascript, e isso significa que nosso aplicativo é recarregado com o navegador quando atualizado.

E então, finalmente, o que faremos é recuperar o token em nosso armazenamento local. Ao fazer isso, podemos ter o token do usuário no navegador, independentemente de quando atualizarmos a janela, e ter um método de login automático de nosso usuário, desde que o token ainda seja válido.

Um novo método de actions chamado AutoLogin é criado, onde obteremos o token e o userId do armazenamento local e enviaremos nossos dados para o método authUser nas mutações.

 actions : { AutoLogin ({commit}) { const token = localStorage.getItem('token') if (!token) { return } const userId = localStorage.getItem('userId') const token = localStorage.getItem('token') commit('authUser', { idToken: token, userId: userId }) } }

Em seguida, vamos ao nosso App.vue e escrevemos um método created , que despachará o autoLogin de nossa loja toda vez que o aplicativo for carregado.

 created () { this.$store.dispatch('AutoLogin') }

Buscar_User_Data

Queremos dar as boas-vindas ao usuário no painel exibindo o nome do usuário. E assim, outra ação chamada fetchUser é criada, que primeiro verifica se há um token como de costume. Em seguida, ele obtém o email do armazenamento local e consulta o banco de dados conforme feito anteriormente com a validação do email.

Isso retorna um objeto contendo os dados do usuário inicialmente enviados durante a inscrição. Em seguida, convertemos esse objeto em um array e o comprometemos com a mutação storeUser inicialmente criada.

Depois disso, criamos outro getter chamado user que retorna o state.user já confirmado por meio de storeUser .

 getters: { user (state) { return state.user }, isAuthenticated (state) { return state.idToken !== null } }

De volta ao painel, criamos um novo método computado chamado name que retorna state.user.name somente se o usuário existir.

E também adicionaremos a propriedade computada created para despachar a ação fetchUser assim que a página for carregada. Em seguida, usamos o v-if em nosso HTML para exibir o nome se o nome existir.

 <p v-if="name">Welcome, {{ name }} </p>

Send_Survey

Para enviar a pesquisa, criaremos uma ação postData que envia os dados para o banco de dados usando a API do banco de dados, com o token para mostrar ao servidor que o usuário está logado.

Voltamos ao componente do painel e despachamos os dados para nossa ação postData na loja.

 methods : { onSubmit () { const postData = { price: this.price, long: this.long, comment: this.comment } console.log(postData) this.$store.dispatch('postData', postData) } }

Aí está, temos muitos recursos úteis implementados em nosso aplicativo de demonstração enquanto nos comunicamos com nosso servidor Firebase. Espero que você use esses recursos poderosos em seu próximo projeto, pois eles são muito críticos para a criação de aplicativos da Web modernos hoje.

Se você tiver alguma dúvida, pode deixá-las na seção de comentários e terei prazer em responder a cada uma delas!

• A demonstração do tutorial está disponível aqui.

Outros recursos que podem ser úteis incluem:

• Para entender mais sobre o Firebase e os outros serviços que ele oferece, confira o artigo de Chris Esplin, “O que é Firebase?”
• Vuelidate é uma biblioteca muito legal na qual você deveria se aprofundar. Você deve ler sua documentação para obter uma visão completa.https://vuelidate.js.org/.
• Você também pode explorar axios por conta própria, especialmente se quiser usá-lo em projetos maiores.