My app has a login screen that, through a function, checks with an api if the login is correct, when it is, it executes the redirect, which, seeing it in the browser, changes the url from localhost:4200/login to localhost:4200/home, but it doesn’t change the page and on the cell phone nothing happens. I’ve already used ionic’s NavController and angular’s router. And for post request I’m using axios.
login.page.ts
import { HomePage } from './../home/home.page';
import { NavController } from '@ionic/angular';
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
public dispositivo: string;
public senha: string;
constructor(private router: Router, private navCtrl: NavController) { }
ngOnInit() {
}
entrar() {
console.log(this.dispositivo)
console.log(this.senha)
const axios = require('axios');
axios({
method: 'post',
url: 'url used',
data: {
dispositivo: this.dispositivo,
senha: this.senha
}
})
.then(response => {
console.log(response.data)
if (response.data.dispositivo == undefined) {
console.log('login incorreto')
} else {
// this.router.navigateByUrl('home');
// this.navCtrl.navigateRoot('/home');
this.router.navigate(['/home', '']);
}
})
.catch(error => {
console.log(error)
})
}
}
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
},
{
path: 'login',
loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
},
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'login/home',
redirectTo: 'home',
pathMatch: 'full'
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
login.page.html
<ion-content class="content">
<div class="div-login">
<div class="div-input">
<label for="nome_usuario">Dispositivo:</label>
<ion-input id="nome_usuario" name="nome_usuario" class="input-login" type="text" [(ngModel)]="dispositivo"></ion-input>
</div>
<div class="div-input">
<label for="senha_usuario">Senha:</label>
<ion-input id="senha_usuario" name="senha_usuario" class="input-login" type="password" [(ngModel)]="senha"></ion-input>
</div>
<div style="margin-top: 5%; margin-right: 25%; margin-left: 35%;">
<ion-button (click) = "entrar()">Entrar</ion-button>
</div>
</div>
</ion-content>