In my Angular 2 application, I am utilizing Auth0 authentication.
While everything works fine on localhost, I encounter issues when running the application on the server (my domain).
Based on what I know, my problem seems to be with the routes.
Issue:
I can successfully log in using Auth0 in my Angular app (both on localhost and on the server - including logout). Post login, the application redirects to my Control Page without any issues, and within the application, I have menus, pages with their respective routes, etc.
Everything functions correctly on localhost, BUT after logging in on the server, I am unable to navigate between the pages in my app. Everything results in a 404 page, even upon refreshing the page.
In addition to this, I am also incorporating JQuery and Materialize CSS. Upon reloading, JQuery fails to load initially but eventually loads after the refresh, making the effects work.
Code:
app.routing.ts:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth/auth.guard';
import { HomeComponent } from './components/home/home.component';
import { PainelComponent } from './components/painel/painel.component';
import { ReunioesComponent } from './components/reunioes/reunioes.component';
import { AssociadosComponent } from './components/associados/associados.component';
import { CalendarioComponent } from './components/calendario/calendario.component';
import { TesourariaComponent } from './components/tesouraria/tesouraria.component';
import { DocumentosComponent } from './components/documentos/documentos.component';
const appRoutes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'painel',
component: PainelComponent,
canActivate: [AuthGuard]
},
{
path: 'associados',
component: AssociadosComponent,
canActivate: [AuthGuard]
},
{
path: 'calendario',
component: CalendarioComponent,
canActivate: [AuthGuard]
},
{
path: 'reunioes',
component: ReunioesComponent,
canActivate: [AuthGuard]
},
{
path: 'tesouraria',
component: TesourariaComponent,
canActivate: [AuthGuard]
},
{
path: 'documentos',
component: DocumentosComponent,
canActivate: [AuthGuard]
}
];
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, {useHash: false})
auth.service.ts:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { tokenNotExpired } from 'angular2-jwt';
declare var Auth0Lock: any;
@Injectable()
export class Auth {
lock = new Auth0Lock('SECRET', 'SECRET.auth0.com', {});
constructor(private router: Router) {
this.lock.on("authenticated", (authResult) => {
this.lock.getProfile(authResult.idToken, (err, profile) => {
if(err)
throw new Error(err)
localStorage.setItem('profile', JSON.stringify(profile));
localStorage.setItem('id_token', authResult.idToken);
this.router.navigate(['/painel'])
})
});
}
public login() {
this.lock.show()
}
public authenticated() {
return tokenNotExpired()
}
public logout() {
localStorage.removeItem('id_token');
localStorage.removeItem('profile')
}
}
sidenav.partial.html:
<ul id="slide-out" class="side-nav fixed">
<li><a href="/associados"><i class="material-icons">group</i>Associados</a></li>
<li><a href="/calendario"><i class="material-icons">event</i>Calendário</a></li>
<li><a href="/painel"><i class="material-icons">new_releases</i>Calendário Próximo</a></li>
<li><a href="/reunioes"><i class="material-icons">forum</i>Reuniões</a></li>
<li><a href="/tesouraria"><i class="material-icons">monetization_on</i>Tesouraria</a></li>
<li><a href="/documentos"><i class="material-icons">attach_file</i>Documentos</a></li>
<li><br></li>
<li class="show-on-med-and-down hide-on-large-only">
<a href="#!" (click)="auth.logout()"><i class="material-icons">close</i>Sair</a>
</li>
</ul>
Thanks!