Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Como carregar informações de uma página para outra?

Olá pessoal, tudo bom?

Para treinar meus conhecimentos estou desenvolvendo um projeto paralelo, usando JS Vanilla e Firebase, mas estou encontrando um problema que simplesmente não consigo resolver.

Em resumo, preciso gerar uma informação em uma página (login.html) e utilizá-la em outra (dashboard.html).

Após realizar o login e fazer a autenticação via Firebase, recebo um objeto que utilizo para popular uma outra classe:

validaLogin(loginId, senhaId){
        this.loginId = loginId.value;
        this.senhaId = senhaId.value;        

        firebase.auth().signInWithEmailAndPassword(this.loginId,this.senhaId)
            .then(
                info => {
                    this.getUserInfo(info.user.email)
                    console.log(info.user.email)
                    window.location = "dashboard.html";
                }
                )
            .catch(function(error){
                alert(error.message)
        });
    }
getUserInfo(userEmail){

        this.users.on('value', function(users){
            users.forEach(user => {
                if(user.val().email == userEmail){
                    let userInfo = new UserInfo(user.val());
                }
            });
        });
    }
class UserInfo{

    constructor(object){
        this.userName;
        this.object = object;
        this.validaInfo();
    }

    validaInfo(){
        let nomeUsuario = this.object.name;
        this.setUserName(nomeUsuario);
    }

    setUserName(userName){
        this.userName = userName;
    }

    getUserName(){
        return this.userName;
    }
}

Na página de Login funciona tudo certo, porém, ao chegar na Dashboard, onde seria necessário chamar o getUserName() as informações não ficam disponíveis.

A única forma que eu consegui foi através de sessionStorage, declarando o userName e chamando na Dashboard (o que, acredito, não é o correto). Pesquisei também sobre os conceitos de Singleton mas não entendi direito se seria o caso de utilizar nesse problema.

Alguém consegue me ajudar com esse problema que já me gastou mais de 2 semanas rs?

Obrigada!

4 respostas

Lívia, bom dia!

Muito bom saber fazer esses projetos paralelos para reforçar os estudos!

Uma forma de fazer essa transferência de dados seria através de cookies, você pode criar um cookie pra cada informação que vai precisar no dashboard e ele ficara disponível pra todas as páginas do site até que o navegador feche ou dê o tempo de expiração que você determinar

Você pode ver um pouco a respeito nessa página aqui, é muito fácil de usar e com poderá praticar assim que terminar a leitura.

Espero ter ajudado e bons estudos! Qualquer dúvida só mandar, estamos a disposição :)

Oi Felipe, tudo bom? Mas cookie é a melhor solução?

Você deve sempre validar os dados fornecidos pelo usuário e assumir que ele pode ser modificado. Pode ser modificado não por terceiros, mas por um usuário mal-intencionado ou por alguém que tenha acesso ao navegador do usuário legítimo. Você também deve proteger os cookies que contêm dados pessoais do usuário (email, senha, endereço etc.) do XSS. Uma boa maneira seria usar o sinalizador HttpOnly. A melhor maneira é criptografar os cookies, portanto, apenas o seu aplicativo conhece o conteúdo deles. Isso impediria o conteúdo de cookies do acesso direto também.

solução!

Oi Felipe, tudo bom?

Fui atrás de mais informações sobre persistência em JS (inclusive no blog da Caelum) e depois de ler bastante coisa cheguei a conclusão de que a melhor forma de resolver meu problema seria através de WebStorage, especialmente por que são dados que devem expirar ao deixar a janela do webapp.

Deixo aqui minhas referências caso alguém mais tenha a mesma dúvida:

http://blog.caelum.com.br/webstorage-persistencia-no-front-end/

https://medium.com/datadriveninvestor/cookies-vs-local-storage-2f3732c7d977

https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies

https://pt.stackoverflow.com/questions/115190/qual-a-diferen%C3%A7a-entre-sessions-e-cookies

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software