Ionic 3 + Angular 5 — Criando Sessões
sessão é um intercâmbio de informações interativo semi-permanente, usado para navegação de Dados indiferente de tela ou local. Muito usado em sistemas de login passagem de parâmetros e afins.
No post de hoje vamos passar dados — independente do contexto de página no ionic, essa prática é muito difundida em sistemas de login.
Detalhes do exercício
Para passar dados entre telas (páginas), antes de tudo é necessário criar um model contendo as propriedades que que serão compartilhadas.
Criando o model Usuário
Siga o exemplo abaixo para criar o modelo.
Instalando o plugin Storage do ionic
E instale o pacote abaixo e realize as configurações no arquivo app.module.ts
Configurando App Module
Criando um arquivo injetável de Sessão
Nosso serviço de injeção de dependências será chamado de session.ts e contará com um decorator injectable.
Resumo até aqui
Até o momento temos os seguintes passos realizados:
- Criamos o model usuario.ts;
- Instalamos os Plugins necessário para trabalhar com session no ionic;
- Criamos o arquivo serviço de injeção de dependências: session.ts.
Utilizando o session na Home
Na página home vamos importar nosso arquivo session.ts e ver a mágica acontecendo.
Página de detalhes
Na página de detalhes retorne os dados disparados na home futuramente criaremos a página de detalhes.
Agora o código typescript para retornar a sessão:
Criando página para fazer login e criar sessão
Implementei um login seguindo os passos desse de um post anterior caso que esta disponível no link Ionic 3 + Angular 5 — Facebook Login native.
Resultado
Observe que assim que é feito o login o usuário foi redirecionado para o painel de controle, e no header, ele temos uma mensagem de boas vindas.. Isso é ma magia das sessions.
Espero que tenham gostado qualquer dúvida pode postar nos comentários.
Forte abraço!
